import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react';
import { isArray, isObject } from 'cbkfe-utils';
import { Popup } from 'cbkfe-ui';
import './style/index';


const formatData = function (list, noDisable) {
    if (!isArray(list, true)) {
        return null;
    }
    let result = list.map((item) => {
        item.disable = item.soldStatus === 3;
        return item;
    });
    return noDisable
        ? result.filter(item => !item.disable).map((item, index) => {
            item.$index = index;
            return item;
        })
        : result.map((item, index) => {
            item.$index = index;
            return item;
        });
};

/**
 * 
 * @param {*} list 渲染的列表 
 * @param {*} noDisable 不展示disable的元素
 * @param {*} className 自定义class
 * @param {*} defaultIndex 默认索引
 * @param {*} defaultId 默认展示的id
 * @param {*} onChange 选择的时候
 * @param {*} justScroll 默认选中的时候不做选中操作，只滚动
 */

function PackageCountListContainer({ list, className, noDisable, defaultIndex, defaultId, onChange, justScroll, showRefundableLabel = true }) {
    const [selected, setSelected] = useState({});
    const [_list, updateList] = useState(formatData(list, noDisable));
    const scrollRef = useRef(null);

    useEffect(() => {
        updateList(formatData(list, noDisable));
    }, [list, noDisable]);

    useEffect(() => {
        if (isObject(selected, true) || !isArray(_list, true)) {
            return;
        }
        let defaultItem = null;
        // 用索引作为默认值
        if (typeof defaultIndex === 'number') {
            defaultItem = _list.filter(item => item.soldStatus !== 3)[defaultIndex];
        }
        // 用id作为默认值
        if (defaultId) {
            defaultItem = _list.filter(item => item.itemSkuId === defaultId)[0];
        }
        if (defaultItem) {
            !justScroll && setSelected(defaultItem);
            try {
                let itemWidth = scrollRef.current.children[0].clientWidth;
                scrollRef.current && scrollRef.current.scrollTo(itemWidth * (defaultItem.$index - 0.5), 0);
            } catch (error) {

            }
        }

    }, [defaultIndex, _list, selected, defaultId, justScroll]);

    const onSelected = useCallback((item) => {
        setSelected(item);
        typeof onChange === 'function' && onChange(item);
    }, [onChange]);
    return useMemo(() => {
        if (!isArray(_list, true)) {
            return null;
        }
        return <div className={`cbkfe-packageCountList-scroll ${className}`}>
            <div ref={scrollRef}
                className={`cbkfe-template-packageCountList ${_list.length <= 2 ? 'cbkfe-template-packageCountList--double' : 'cbkfe-template-packageCountList--multi'}`} >
                {_list.map(item => <div key={item.itemSkuId} className="package-count-itemBox">
                    <div
                        key={item.itemSkuId}
                        className={`
                    package-count-item
                    package-count-item--${item.disable ? 'disable' : ''}
                    package-count-item--${selected.itemSkuId === item.itemSkuId ? 'active' : ''}
                `}
                        onClick={() => !item.disable && onSelected(item)}
                    >
                        {showRefundableLabel && item.saleDesc && <div className="package-refundable-label">{item.saleDesc}</div>}
                        <div className="package-count">
                            <span className="package-count__text">{item.selectM}</span>
                            <span className="package-count__unit">次</span>
                        </div>
                        <div className="package-price">
                            <span className="package-price__soldPrice">￥{item.soldPrice}</span>
                            <del className="package-price__marketPrice">￥{item.marketPrice}</del>
                        </div>
                        <div className="package-label">
                            <span className="package-label__text">￥{item.singlePrice}/次</span>
                        </div>
                        {item.disable && <div className="package-count-label package-count-label--disable">{item.statusDesc}</div>}
                    </div>
                </div>)}
            </div>
        </div>;
    }, [_list, className, selected, onSelected]);
}

export default function PackageCountList({ popup, showPopup, popupTitle, onClose, hideOne, FooterBar = null, ...rest }) {
    if ((!isArray(rest.list, true) || (hideOne && rest.list.length <= 1))) {
        return null;
    }
    return popup
        ? <Popup
            className="cbkfe-packageCountList-popupContent"
            show={showPopup}
            onBackClick={onClose}
        >
            <div className="cbkfe-packageCountList-popup">
                <div className="packageCountList-popup__title">{popupTitle || '请选择次数'}</div>
                <PackageCountListContainer {...rest} />
                {<div className="packageCountList-popup__footerbar">{FooterBar}</div>}
            </div>
        </Popup>
        : <PackageCountListContainer {...rest} />;
}