/**
 * @file ControlsBtnGroup 播放器控件控件按钮
 * @author zhaoqiang05
 */

import { Component } from 'san';
import { isShowGuide, getGuideInfo, setGuideInfo, formatVideoDuration } from '../util/index';
import { JUMP_GUIDE_KEY } from '../util/constant';
import { ABTEST_MAP, getAbTestValue } from '../../../util/abtest';

export default class ControlsBtnGroup extends Component {
    static trimWhitespace = 'all';
    static template = `
        <div></div>
    `;

    showGuideTimer: any = null;
    activeTimer: any = null;
    remainingTimeTimer: any = null;

    // 用于和search-ui组件打齐
    defaultSample = 1;
    guideInfoInit: Record<number, any> = {
        1: {
            lastShowTime: 0,
            showCount: 0,
            beforeShow: 5000,
            beforeHide: 5000,
        },
    };

    initData() {
        return {
            // props
            fullscreenLinkInfo: window.aaa,
            playState: 'none',
            // 剩余视频时长，单位：秒
            remainingTime: 0,
            colSize: 12,
            hideGuide: false,
            isPaused: false,

            // data
            _showGuide: false,
            _isActive: false,
            // 隐藏剩余视频时长
            _hideRemainingTime: false,
            _videoFullBtnExp: ABTEST_MAP.VIDEO_FULLBTN_EXP.curValue,
        };
    }

    static computed = {
        /**
         * 格式化视频剩余时间
         */
        formattedRemainingTime(this: ControlsBtnGroup) {
            setTimeout(() => {});
            return formatVideoDuration(~~this.data.get('remainingTime'));
        },
    };

    attached() {
        this.watch('playState', (state) => {
            // 长辈模式（适老化）下屏蔽跳转引导
            if (this.data.get('hideGuide') || (window as any).page?.comm?.isElderMode) {
                return;
            }
            this.showGuideTimer && clearTimeout(this.showGuideTimer);
            if (state === 'played') {
                const guideInfoList =
                    (getGuideInfo(JUMP_GUIDE_KEY) as unknown as Record<number, any>) || this.guideInfoInit;
                const guideInfo = guideInfoList[this.defaultSample];

                // 距离上次展示不超过1天的，不做展示，生命周期内最多展示3次
                if (isShowGuide(guideInfo)) {
                    const { showCount = 0 } = guideInfo;
                    this.nextTick(() => {
                        setGuideInfo(JUMP_GUIDE_KEY, {
                            1: {
                                lastShowTime: Date.now().toString(),
                                showCount: +showCount + 1,
                                beforeShow: 5000,
                                beforeHide: 5000,
                            },
                        });
                    });

                    this.data.set('_showGuide', true);
                    this.showGuideTimer = setTimeout(() => {
                        this.data.set('_showGuide', false);
                    }, 5000);
                }
            } else {
                this.data.set('_showGuide', false);
            }
        });

        this.watch('_showGuide', (state) => {
            this.fire('show-fullscreen-guide', state);
            // 隐藏剩余视频时长（视频尺寸<=8n时）
            if (this.data.get('colSize') <= 8) {
                if (state) {
                    this.data.set('_hideRemainingTime', state);
                } else {
                    // 动画完成300ms
                    this.remainingTimeTimer = setTimeout(() => {
                        this.data.set('_hideRemainingTime', state);
                    }, 310);
                }
            }
        });

        this.data.set('_videoFullBtnExp', getAbTestValue('VIDEO_FULLBTN_EXP'));
    }
    detached() {
        this.showGuideTimer && clearTimeout(this.showGuideTimer);
        this.activeTimer && clearTimeout(this.activeTimer);
        this.remainingTimeTimer && clearTimeout(this.remainingTimeTimer);
    }

    handleClick() {
        this.data.set('_isActive', true);
        this.activeTimer && clearTimeout(this.activeTimer);
        this.activeTimer = setTimeout(() => {
            this.data.set('_isActive', false);
        }, 5000);
    }
    voiceBtnClicked() {
        this.handleClick();
    }

    handleGuideClick() {
        // 抛出全屏事件
        this.dispatch('cos:rich-video-player-fullscreen', true);
    }

    handlePlayPause(event: Event) {
        event.preventDefault();
        event.stopPropagation();
        this.fire('play-icon-click');
    }
}