import SDKBaseView from "./SDKBaseView";
import SDKControllerBase from "../SDKController/SDKControllerBase";
import { DOMButton, DOMCheckbox, SDKControllerUIComponents, setDefaultStyle, SDKControllerUIComponent } from "./SDKControlUI";

/**
 * 单机版本的控制台
 */
export default class SDKPcDashBoardView extends SDKBaseView {
    /**菜单栏 */
    protected _menuContainer: any;
    //UI组件集合
    protected _components: any;

    constructor(controller: SDKControllerBase) {
        super(controller);

        this.initUI();
    }

    private initUI() {
        this.initRem();
        this.initMenuContaner();
        this.initMenuContent('Video');
    }

    /**
     * 计算REM
     */
    private initRem() {
        let rem = window.innerWidth / window.innerHeight > 1.83 ? window.innerHeight / 10.8 : window.innerWidth / 19.2;
        document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
    }

    /**
     * 创建菜单容器，
     * 设置界面样式
     */
    private initMenuContaner(): void {
        //设置样式
        setDefaultStyle();

        this._menuContainer = document.createElement('div');
        this._menuContainer.setAttribute('id', 'controllCenter');
        document.body.appendChild(this._menuContainer);
    }

    /**
     * 初始化菜单内容
     */
    private initMenuContent(menuName: string): void {
        let self = this;

        //隐藏所有ui组件
        // this._menuContainer.childNodes.forEach(element => {
        //     element.style.display = 'none';
        // });

        Array.prototype.forEach.call(this._menuContainer.childNodes, element =>{
            element.style.display = 'none';
        });


        let componentList = [];
        let componentHideList = []; //加入当前ui组件模块但是一开始不显示

        switch (menuName) {
            case 'Video':
                componentList = ['prev', 'next', 'forward', 'backward', 'play', 'split', 'controll'];
                componentHideList = ['forward', 'backward', 'play', 'split', 'controll'];
                break;
            case 'Checkpoint':
                componentList = ['prev', 'next', 'prevCheck', 'nextCheck', 'split', 'controll'];
                componentHideList = ['prevCheck', 'nextCheck'];
                break;
            case 'Split':
                componentList = ['split'];
                componentHideList = [];
                break;
            default: throw new TypeError(`教师控制面板：未定义的控制模组${menuName}`);
        }

        for (let item of componentList) {
            let comp = SDKControllerUIComponents[item];
            if (this._components[item]) {
                this._components[item].show();
                // this.components[item].refresh(comp);
                continue;
            }
            if (comp.type == 'button') {
                this.createButton(comp)
            } else if (comp.type == 'checkbox') {
                this.createCheckbox(comp);
            }
        }

        for (let item of componentHideList) {
            let comp = SDKControllerUIComponents[item];
            if (this._components[item]) {
                this._components[item].hide();
                // this.components[item].refresh(comp);
                continue;
            }
            if (comp.type == 'button') {
                this.createButton(comp, true);
            } else if (comp.type == 'checkbox') {
                this.createCheckbox(comp);
            }
        }

        this._components["prev"].onClick = function () {
            self._controller.dispatcherHandle("gamePrevScene", null, true);
        }

        this._components["next"].onClick = function () {
            self._controller.dispatcherHandle("gameNextScene", null, true);
        }
    }

    //这个className对应的是样式类，请一定要对号入座
    private createButton(comp: SDKControllerUIComponent, notShow?: boolean) {
        let button = new DOMButton(comp, this);
        if (notShow) button.hide();
        this._components[comp.name] = button;
        this._menuContainer.appendChild(button.domElem);
    }

    private createCheckbox(comp: SDKControllerUIComponent, notShow?: boolean) {
        let checkbox = new DOMCheckbox(comp, this);
        if (notShow) checkbox.hide();
        this._components[comp.name] = checkbox;
        this._menuContainer.appendChild(checkbox.domElem);
    }

    public reset(): void {
        super.reset();

        this._components = {};
    }

    public destroy(): void {
        super.destroy();
    }
}