import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import request from 'cbkfe-request';
import { isArray } from 'cbkfe-utils';
/**
 * @description 分销奖励广播接口
 * @author 吉米
 * @Date 2019.11.15
 * @param {object} data
 */
function partnerAwardBoardCast(data) {
    return request({
        url: '/gw/cps/award/boardcast.html',
        data,
        unload: true
    });
}

const Wheel = ({ list, className, callback, render }) => {

    const container = useRef(null);
    const content = useRef(null);

    const [activeItem, setActiveItem] = useState(0);

    useEffect(() => {
        const fadeInTime = 200, stopTime = 3000, fadeOutTime = 400;
        const cHeight = container.current && container.current.clientHeight || 0;
        let showNum = 0;
        const move = () => setTimeout(() => {
            // 移入
            content.current.style.cssText = `transition: transform ${fadeInTime}ms ease-in-out; transform: translateY(-${(showNum + 1) * cHeight}px);`;

            showNum++;
            setTimeout(() => {
                // 移出
                content.current.style.cssText = `transition: transform ${fadeOutTime}ms ease-in-out; transform: translateY(-${(showNum + 1) * cHeight}px);`;
                setTimeout(() => {
                    content.current.style.cssText = '';
                    setActiveItem(activeItem + 1);
                }, fadeOutTime);
            }, stopTime);
        }, fadeInTime);
        if (isArray(list, true) && activeItem < list.length) {
            move();
        } else {
            setActiveItem(0);
            callback();
        }
    }, [activeItem, callback, list]);

    return isArray(list, true) ? <div className={`wheel-container ${className}`} ref={container}>
        <div className="wheel-content clear" ref={content}>
            {render(list[activeItem])}
        </div>
    </div> : null;
};

export default function CpsBarrage({ barHeight }) {
    const [renderList, updateRenderList] = useState([]);

    // 轮播图渲染子节点
    const wheelRender = useCallback((item, index) => {
        return <div className="wheel-item--join" key={index}>
            <img src={item && item.logo} alt="" className="join-icon" />
            <div className="join-comment">
                <p className="join-name">{item && item.name}</p>
                <p className="comment">{item && item.notice}</p>
            </div>
        </div>;
    }, []);

    const appendRenderList = useCallback(() => {
        partnerAwardBoardCast({}).then(data => {
            isArray(data, true) && updateRenderList(renderList => [...renderList, ...data]);
        }).catch(e => {
            console.error('获取轮播图失败了', e);
        });
    }, []);
    return useMemo(() => {
        return <div className="cps-modules-barrage-container" style={{ top: barHeight ? (barHeight + 0.25) + 'rem' : '2.7rem' }}>
            <Wheel
                list={renderList}
                className="cps-modules-barrage--join"
                render={wheelRender}
                callback={appendRenderList}
            />
        </div>;
    }, [renderList, wheelRender, appendRenderList]);
}