import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { getLocation } from 'cbkfe-bridge';
import { isArray, localUrl, isObject } from 'cbkfe-utils';
import useScrollEnd from '../useFunctions/useScrollEnd';
import request from 'cbkfe-request';
import CardPackages from './component';
import './style/index';

let _LIMIT = 5;
export default function RecommandCard({
    list = [],
    tipBtnTxt = "已经是全部内容啦",
    RenderHeader, // 自定义headerDOM
    headerText = '更多爆款推荐',
    className = '', // 自定义
    scrollElement
}) {

    const [source] = useState(list);
    const [limit, setLimit] = useState(_LIMIT);

    // // 下一页
    useScrollEnd(() => {
        if (source.length >= 20 && _LIMIT < source.length) {
            _LIMIT += 5;
            console.log(_LIMIT, source.length);
            setLimit(_LIMIT);
        } else {
            setLimit(source.length);
        }

    }, [scrollElement]);

    return useMemo(() => {
        if (!isArray(source, true)) {
            return null;
        }
        return <div className={`cbkfe__recommandCard ${className}`}>
            {RenderHeader ? RenderHeader : <div className="template__header"><div style={{ transform: "translateY(-0.5px)" }}>{headerText}</div></div>}
            <CardPackages list={source} limit={limit} />
            {source && source.length === limit ? <div className="recommands__endText">{tipBtnTxt}</div> : null}
            <div className="recommands__iphonex"></div>
        </div>;

    }, [RenderHeader, className, source, limit, tipBtnTxt]);
}