import React, { useState, useEffect, useMemo } from 'react';
import { isArray, browser } from 'cbkfe-utils';
import CommonHeader from '../CommonHeader';
import './style';

function ChoosePackageItem({
    rightIcon,
    className,
    rightIconUrl = 'https://static.caibeike.com/i/6d23cb92f7d14f04a74ac078119f7653-QyppIa-gMwgMhp1',
    onClick = function () { },
    info
}) {
    return useMemo(() => {
        return <div onClick={() => {
            typeof onClick === 'function' && onClick(info);
        }} className={`cbkfe-choosePackage-item ${className}`}>
            {info.brandTitle && <div className="choosePackage-item__title">
                <img className="choosePackage-item__titleIcon" src="https://static.caibeike.com/i/a5f2168463fdc94c5f00e5918499a5f4-M7pKk6" />
                <span className="choosePackage-item__titleText">{info.brandTitle}</span>
            </div>}
            {info.itemSkuTitle && <div className="choosePackage-item__subTitle">{info.itemSkuTitle}</div>}
            {isArray(info.properties, true) && <div className="choosePackage-item__desc">
                {info.properties.map(text => <span data-type={info.appointType} className="choosePackage-item__descItem" key={text} >{text}</span>)}
            </div>}
            {isArray(info.tags, true) && <div className="choosePackage-item__labels">
                {info.tags.map(text => <span className="choosePackage-item__label"><span className={`productor-recommend__tagText ${browser.versions.android ? 'recommend__tagText--and' : ''}`}>{text}</span></span>)}
            </div>}

            {typeof rightIcon === 'undefined'
                ? <img className="choosePackage-item__rightIcon" src={rightIconUrl} />
                : rightIcon || null
            }
        </div>;
    }, [info]);
}

const PackageList = ({
    header = {},
    list = [],
    item = {},
    limit = 7,
    onClick,
    className
}) => {
    const [cacheList, updateCacheList] = useState(list);
    const [renderList, updateRednerList] = useState(list.slice(0, limit));
    useEffect(() => {
        isArray(list, true) && updateCacheList(list);
        isArray(list, true) && updateRednerList(list.slice(0, limit));
    }, [list]);

    return useMemo(() => {
        if (!isArray(list, true)) {
            return null;
        }
        return <div className={`cbkfe-template-choosePackage ${className}`}>
            {header && <div className="cbkfe-choosePackage-header"><CommonHeader {...header} /></div>}
            {isArray(renderList, true) && renderList.map((info, index) => {
                item.info = info;
                return <div key={index} className="cbkfe-choosePackage-box">
                    <ChoosePackageItem onClick={onClick} {...item} />
                </div>;
            })}
            {renderList.length < cacheList.length && <div onClick={() => {
                updateRednerList(cacheList);
            }} className="cbkfe-choosePackage-expandBtn">查看剩余{cacheList.length - limit}个套餐 <i className="iconfont icon--arrow--down"></i></div>}
            {renderList.length === cacheList.length && renderList.length > limit && <div onClick={() => {
                updateRednerList(cacheList.slice(0, limit));
                let limitTarget = document.querySelectorAll('.cbkfe-choosePackage-box')[limit - 1];
                window.scrollTo(0, limitTarget.offsetTop);
                limitTarget = null;
            }} className="cbkfe-choosePackage-expandBtn">收起 <i className="iconfont arrow--up icon--arrow--down"></i></div>}

        </div>;
    }, [renderList, cacheList]);
};


Object.defineProperty(PackageList, 'Item', {
    value: ChoosePackageItem
});
// ChoosePackage.prototype.Item = ChoosePackageItem;

export default PackageList;