/* eslint-disable react/jsx-indent-props */
import React, { useState, useMemo, useEffect, useCallback } from 'react';
import Price from '../Price';
import { getLocation, mb_refreshMyProfile } from 'cbkfe-bridge';
import { isArray, localUrl, open, isObject, browser } from 'cbkfe-utils';
import { Toast } from 'cbkfe-ui';
import useScrollEnd from '../useFunctions/useScrollEnd';
import request from 'cbkfe-request';
import './style/index';

/**
 *
 * HOTEL("hotel", "酒店"),
    SHOPCARD("shopcard", "商户卡"),
    TICKET("ticket", "门票"),
    GROUPON("groupon", "拼团"),
    GROUPONDEAL("groupondeal", "营销商品"),
    CUTONE("cutitem", "砍价"),
 */

function appendCutSubfix(imageUrl) {
    return imageUrl.indexOf('@!') === -1 ? `${imageUrl}@!s480` : imageUrl || '';
}

function computedLineLimit(item) {
    if (!item.joinCountDesc && !item.remainCountDesc) {
        return 2;
    }
    return 1;
}

// 对比2个对象是否值一样
function compareWithObject(obj1, obj2) {
    // 都是对象并且他们的长度相等
    let keys1 = Object.keys(obj1);
    let keys2 = Object.keys(obj2);
    if (isObject(obj1) && isObject(obj2) && keys1.length === keys2.length) {
        if (keys2.length === 0) {
            return true;
        }
        let status = true;
        for (let key of keys1) {
            if (status && isObject(obj1[key])) {
                status = compareWithObject(obj1[key], obj2[key]);
            } else if (obj1[key] !== obj2[key]) {
                status = false;
                return false;
            }
        }
        return status;
    }
    return false;
}

function requestForSource(data, api) {
    const channel = browser.versions.wechat ? 'wx' : 'app';
    const res = getLocation(channel).then(geo => {
        return request({
            url: localUrl.tradeAjaxUrl(api || '/ajax/item/recommend/all.html'),
            data,
            reqDataType: 'json',
            unload: true,
            headers: geo,
        });
    });
    return res;
}

export function getCutItemApply(data) {
    return request({
        url: '/gw/cutitem/apply.html',
        reqDataType: 'json',
        data,
        unload: true,
    });
}

// 商品类型和列表样式的映射关系
const itemTypeMapToStyleType = {
    cutitem: 'flower'
};

export default function RecommandList({
    itemInfo = {},
    RenderHeader, // 自定义headerDOM
    type = '', // 默认的headerType: line:是竖线模式,  flower:中间有一朵花
    headerText = '更多爆款推荐',
    className = '', // 自定义
    thresholds = 0,
    limit = 10,
    scrollElement,
    api,
    callback, // 这里的 callback 是为了判断是否有推荐的商品，决定是否显示商品详情顶部的包括推荐文案
}) {

    const [_itemInfo, updateItemInfo] = useState(itemInfo);
    const [page, updatePage] = useState(0);
    const [source, updateSource] = useState([]);
    const [hasNext, setHasNext] = useState(true);
    const [filterBrandList, fupdateBrandList] = useState([]);

    const resetInfo = useCallback(() => {
        updateSource([]);
        updatePage(0);
        setHasNext(true);
        fupdateBrandList([]);
    }, []);

    const cutApply = useCallback((item) => {
        getCutItemApply({ itemCode: item.itemId }).then(data => {
            if (data.state === 1 || data.state === 3) {
                if (data.state === 1) {
                    mb_refreshMyProfile('hotSale', `cutitem-${item.itemCode}`);
                }
                open(data.url);
            } else {
                Toast.info(data.content);
            }
        }).catch(e => {
            Toast.info(e && e.message || '系统异常');
        });
    }, []);

    const filerDataSource = function (newSource) {
        if (!isArray(newSource, true)) return null;
        let _filterBrandList = filterBrandList;
        let productBrand = _itemInfo.brandName;

        let result = newSource.filter(item => {
            let itemBrand = item.distinctBrandName;
            // 如果商品没有brand或者和查询商品的brand相同，那么展示出来
            if (!itemBrand || itemBrand === productBrand) return true;
            // 如果已经存在过了，那么就不展示
            if (_filterBrandList.includes(itemBrand)) {
                return false;
            }
            // 如果还没展示过, 把这个塞到List中
            _filterBrandList.push(itemBrand);
            return true;
        });
        if (!result.length) return [newSource[Math.floor(Math.random() * newSource.length)]];
        return result;
    };


    useEffect(() => {
        if (isObject(itemInfo) && isObject(_itemInfo) && compareWithObject(itemInfo, _itemInfo)) {
            return;
        }
        // itemInfo 变更了应该从0 开始
        resetInfo();
        updateItemInfo(itemInfo);
    }, [itemInfo, _itemInfo]);

    useEffect(() => {
        if (!_itemInfo) { // 如果突然没有值了,就初始化所有状态，下次有值的时候保证数据不要乱
            resetInfo();
            return;
        }
        if (!hasNext) {
            return;
        }
        // request for data
        requestForSource({
            limit,
            start: page * limit,
            itemInfo: _itemInfo
        }, api).then(data => {
            setHasNext(data.hasNext);
            let newSource = filerDataSource(data.result);
            console.log('-newSource-', newSource.length);
            (newSource && newSource.length) && updateSource(source => ([...source, ...newSource]));
            typeof callback === 'function' && callback((isArray(newSource, true) || isArray(source, true)));
        }).catch(e => {
            typeof callback === 'function' && callback(false);
            setHasNext(false);
        });
    }, [page, limit, _itemInfo, hasNext]);

    // 下一页
    useScrollEnd(() => {
        updatePage(page => page + 1);
    }, [thresholds, scrollElement]);

    return useMemo(() => {
        if (!_itemInfo || !isArray(source, true)) {
            return null;
        }
        const baseLog = {
            'data-cityid': _itemInfo.cityId,
            'data-itemid': _itemInfo.itemId,
            'data-itemtype': _itemInfo.itemType,
            'data-scene': _itemInfo.scene
        };
        return <div
            dot-pv-name="item_rec_detail_exposure"
            {...baseLog}
            className={`template-recommands template-recommands--${type || itemTypeMapToStyleType[_itemInfo.itemType] || 'line'} ${className}`}
        >
            {RenderHeader
                ? <RenderHeader />
                : <div className="template__header"><div style={{ transform: "translateY(-0.5px)" }}>{headerText}</div></div>}
            <div className="recommands-list">
                {source.map((item, index) => <div key={index} onClick={() => {
                    item.itemUrl && open(item.itemUrl);
                }}
                dot-pv-name="item_rec_detail_cell_exposure"
                dot-event-name="item_rec_detail_cell_click"
                data-detail_item_type={item.itemType}
                data-detail_item_id={item.itemId}
                data-index={index}
                {...baseLog}
                className="recommands-item">
                    <img src={appendCutSubfix(item.itemImage)} className="item__image" />
                    <div className="item__content">
                        <div className="item-title">
                            <div className="item__title">{item.brandName}</div>
                            {item.showDistance && <div className="item__distance">{item.distanceDesc}</div>}
                        </div>
                        {item.productName && (
                            item.itemTitle
                                ? <div className="item__subTitle">{item.productName}</div>
                                : <div className="item__subTitle--gray">{item.productName}</div>
                        )}
                        {item.itemTitle && <div className={`item__recommandText item__recommandText--lineCamp${computedLineLimit(item)}`}>{item.itemTitle}</div>}
                        <div className="item-tags">
                            {item.joinCountDesc && <div className="tag--join">{item.joinCountDesc}</div>}
                            {item.remainCountDesc && <div className="tag--normal" >{item.remainCountDesc}</div>}
                        </div>
                        <div className="item-price">
                            {/* <Price className="item__soldPrice" preLabel="9人团" prePrice="低之" afterPrice="/次" marketPrice="999" soldPrice="999.9" /> */}
                            <Price className="item__soldPrice" preLabel={item.grouponLabel} prePrice={item.pricePrefix} afterPrice={item.priceSuffix} marketPrice={item.marketPrice} soldPrice={item.price} />
                            <div onClick={e => {
                                if (item.itemType === 'cutitem') {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    cutApply(item); // 发起砍价
                                }
                            }} className="item__btn">{item.purchaseButton}</div>
                        </div>
                    </div>
                </div>)}
            </div>
            {!hasNext
                ? <div className="recommands__endText">没有更多啦</div>
                : <div className="recommands__endText"><img className="recommands__endText__icon" src="https://static.caibeike.com/i/33e73e33cdc9a151c06450c94cbb8089-Gv0bvQ-fgwfghp1" />正在加载更多商品</div>
            }
            <div className="recommands__iphonex"></div>
        </div>;

    }, [_itemInfo, RenderHeader, type, headerText, className, source, hasNext]);
}