import React, { useEffect, useRef } from 'react';
import { Button } from 'cbkfe-ui';
import { browser, isObject, queryCode, open } from 'cbkfe-utils';
import { mn_navigateBack } from 'cbkfe-bridge';
import './style/index';

// 倒计时无状态组件
const CountDown = (str) => {
    let leftTime = +str - (new Date()).getTime(),
        leftsecond = parseInt(leftTime / 1000),
        day1 = Math.floor(leftsecond / (60 * 60 * 24)),
        hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600),
        minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60),
        second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60),
        timeMilliseSecond = parseInt((leftTime / 100) % 9 + 1);
    return {
        leftTime: leftTime,
        day: day1 < 10 && day1 >= 0 ? '0' + day1 : leftTime < 0 ? '0' : day1,
        hours: hour < 10 && hour >= 0 ? '0' + hour : leftTime < 0 ? '0' : hour,
        minute: minute < 10 && minute >= 0 ? '0' + minute : leftTime < 0 ? '0' : minute,
        second: second < 10 && second >= 0 ? '0' + second : leftTime < 0 ? '0' : second,
        mill: leftTime < 0 ? '0' : timeMilliseSecond
    };
};
function computedTimerText(endTime) {
    let countDown = CountDown(endTime);
    return `距开播还有: ${countDown.day}天 ${countDown.hours}:${countDown.minute}:${countDown.second}`;
}
const inWechat = browser.versions.wechat;
const inMiniApp = browser.parseUA.isMiniSync;
const isAndroid = browser.versions.android;

function LiveActivityEntry({ info, className, styles = {} }) {
    const countRef = useRef(null);
    useEffect(() => {
        let timer = null;
        if (new Date().getTime() < info.activeStartTime) {
            timer = countRef.current && setInterval(() => {
                if (new Date().getTime() >= info.activeStartTime) {
                    timer && clearInterval(timer);
                    timer = null;
                    location.reload();
                } else {
                    countRef.current.innerText = computedTimerText(info.activeStartTime);
                }

            }, 1000);
        }

        return () => {
            timer && clearInterval(timer);
            timer = null;
        };
    }, []);
    if (!isObject(info, true) || !info.activeImage) {
        return null;
    }
    return <div className={`cbkfe-live-activity ${className}`} style={styles}>
        <div className="live-activity-content">
            <img src={info.activeImage} />
            <div className={`live-activity-text  live-activity-text--${isAndroid ? 'android' : ''}`} >{info.activityText}</div>
            {info.activeStartTime > 0 && <div ref={countRef} className="live-activity-countDown">{computedTimerText(info.activeStartTime)}</div>}
        </div>
    </div>;
}


function DoubleElevenEntry({ info, className = '', styles = {}}) {
    // 兼容方式，实现图片通栏显示的效果
    if(info.onlyimg || (info.activeImage && /type=onlyimg/.test(info.activeImage))) {
        return <div className={`cbk-double11-entry cbk-double11-entry--onlyimg ${className}`} style={styles}>
            <div className='double11-content'>
                {info.activeImage && <img className='double11-content__image' src={info.activeImage} />}
            </div>
        </div>;
    }

    return <div className={`cbk-double11-entry ${className}`} style={styles}>
        <div className='double11-content'>
            {info.activeImage && <img className='double11-content__image' src={info.activeImage} />}
            {info.activityText && <div className='double11-content__text' >{info.activityText}</div>}
            <i className='iconfont icon--arrow' />
        </div>
    </div>;
}

export default function ActivityEntry({ info, className, styles = {}, onClick }) {
    if (!isObject(info, true)) return null;
    let Component = null;
    switch (info.activityType) {
        case 'DOUBLE_ELEVEN': Component = DoubleElevenEntry; break;
        default: Component = LiveActivityEntry;
    }
    if (inMiniApp) { // 在小程序中
        return <div onClick={() => {
            // 处理从微信直播间进入商品详情页时 看讲解 按钮逻辑, (有同时处在 看讲解 和 直播广告位情况，为避两者逻辑冲突添加如下条件)
            if (info.activeState && info.activeState === 5 && queryCode('wxFrom') === 'liveRoom') {
                open(browser.parseUA.isMiniSync && info.path || info.activeLinkUrl);
                return false;
            }
            /**
             * 此处page/containers/openMini/index 这个是唤起其他小程序的中转页面，每次新开一个小程序都应该有这个页面
             * 目前后端只处理了是否是直播小程序,这个地方有风险，将来如果有多个小程序互跳，会出现非直播小程序之间跳转混乱
             */
            if (info.activeLinkUrl.indexOf('page/containers/openMini/index') >= 0) {
                open(browser.parseUA.isMiniSync && info.path || info.activeLinkUrl);
            } else {
                let delta = parseInt(queryCode('liveDelta') || 0);
                !delta ? open(browser.parseUA.isMiniSync && info.path || info.activeLinkUrl) : mn_navigateBack({ delta });
            }
        }} >
            <Component info={info} className={className} styles={styles} />
        </div>;
    }


    return <Button
        bindId="cbkfe-activity-entry"
        openUrl={info.activeLinkUrl}
        onClick={onClick}
        type={inWechat ? 'openApp' : ''}
    >
        <Component info={info} className={className} styles={styles} />
    </Button>;
}