import * as React from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { Content as SceneContent, Content } from '../content/Content';
import { Menus } from '../menu/Menus';
import { Global } from '../../utils/Global';
import { PropertyPanel } from '../property/view/PropertyPanel';
import { ProjectPanel } from '../project/ProjectPanel';
import { StatusPanel } from '../status/StatusPanel';
import { MessageUtils } from '../message/MessageUtils';
import { ResizeMessage } from '../resize/events/ResizeMessage';
import { MenuBar } from '../menu/MenuBar';
import { MessageApplication } from '../MessageApplication';
import { TsParser } from '../property/view/TsParser';
import { Paths } from '../../utils/Paths';
export class MainBoard extends React.Component<any, any>{
    private headHeight: number = 46;
    private statusHeight: number = 0;
    private menuBarHeight: number = 30;
    private leftMouseDown: boolean = false;
    private rightMouseDown: boolean = false;
    private clientWidth: number;
    private clientHeight: number;
    private isMouseDown: boolean = false;
    static PROJECT_MIN_WIDTH: number = 200;
    static PROPERTY_MIN_WIDTH: number = 275;
    constructor() {
        super();
        this.clientWidth    = document.documentElement.clientWidth;
        this.clientHeight   = document.documentElement.clientHeight;
        this.state          = { maxHeight: this.clientHeight, projectWidth: MainBoard.PROJECT_MIN_WIDTH, propertyWidth: MainBoard.PROPERTY_MIN_WIDTH, contentWidth: this.clientWidth - MainBoard.PROJECT_MIN_WIDTH - MainBoard.PROPERTY_MIN_WIDTH};
    }

    //初始化整个游戏编辑器
    componentWillMount(): void {
        //初始化配置
        this.initConfig();
        //开始模块
        MessageApplication.startWorker();
        //resize
        this.resize();
        //
        this.parseElslib();

        window.addEventListener('mousemove', this.onMouseMove.bind(this), true);
        window.addEventListener('mouseup', this.onMouseUp.bind(this),true);
    }

    /** 解析els库 */
    private parseElslib() {
        let tsParser: TsParser  = new TsParser();
        tsParser.parseFiles([Paths.PATH_ELSLIB]);
        let datas               = tsParser.getClassDataMap();
        Global.elslib           = {};
        Global.elsComponents    = {};
        Global.elsRendererComponents = {};
        Global.elsCommonComponents = {};
        for (let key in datas) {
            if (key.slice(0, 4) === 'els.') {
                let classInfo   = datas[key];
                if (classInfo.baseNames) {
                    let componentList: string[] = [];
                    let renderComponentList: string[] = [];
                    let commonComponentList: string[] = [];
                    for (let i: number = 0, l: number = classInfo.baseNames.length; i < l; i++){
                        this.testIsComponent(classInfo.baseNames[i], datas, "els.Component", componentList);
                        this.testIsComponent(classInfo.baseNames[i], datas, "els.Renderer", renderComponentList);
                        this.testIsComponent(classInfo.baseNames[i], datas, "els.Component", commonComponentList, ["els.Renderer"]);
                    }

                    if (componentList.length > 0) 
                        Global.elsComponents[key] = key.slice(4);

                    if (renderComponentList.length > 0)
                        Global.elsRendererComponents[key] = key.slice(4);
                    
                    if (commonComponentList.length > 0)
                        Global.elsCommonComponents[key] = key.slice(4);
                }
                Global.elslib[key] = datas[key];    
            }
        }
        console.log(Global.elslib);
    }

    testIsComponent(name: string, datas: any, baseComponentName: string, list: string[], excludes?: string[]) {
        if (name === baseComponentName) {
            list.push(name);
        } else {
            // let isInClude: boolean = false;
            // if (excludes) {
            //     for (let i: number = 0, l: number = excludes.length; i < l; i++){
            //         if (excludes[i] === name) {
            //             isInClude = true;
            //             break;
            //         }
            //     }
            // }
            // if (isInClude) {
            //     list.push(name);
            //     return;
            // }

            let classInfo = datas[name];
            for (let i: number = 0, l: number = classInfo.baseNames.length; i < l; i++){
                this.testIsComponent(classInfo.baseNames[i], datas, baseComponentName, list,excludes);
            }
        }
    }

    private initConfig(): void {
        Global.app = document.getElementById('app');
    }

    private resize(): void {
        window.onresize = (e) => {
            this.clientWidth    = document.documentElement.clientWidth;
            this.clientHeight   = document.documentElement.clientHeight;
            this.setState({ maxHeight: this.clientHeight, contentWidth: this.clientWidth - this.state.projectWidth - this.state.propertyWidth });
            MessageUtils.send(ResizeMessage.RESIZE, { screenwidth: this.clientWidth, screenheight: this.clientHeight });
        }
    }

    private onMouseMove(event:MouseEvent): void {
        if (this.isMouseDown) {
            if (this.leftMouseDown) {
                if (event.clientX > MainBoard.PROJECT_MIN_WIDTH)
                    this.setState({ projectWidth: event.clientX });
            }

            if (this.rightMouseDown) {
                if (event.clientX < this.clientWidth - MainBoard.PROPERTY_MIN_WIDTH) {
                    this.setState({ propertyWidth: this.clientWidth - event.clientX });
                }
            }

            if (this.leftMouseDown || this.rightMouseDown) {
                var contentwidth: number = this.clientWidth - this.state.projectWidth - this.state.propertyWidth;
                this.setState({ contentWidth: contentwidth });
            }
        }
    }

    private onMouseUp(event): void{
        this.leftMouseDown = false;
        this.rightMouseDown = false;
        this.isMouseDown = false;
    }

    private onMouseDown(event): void{
        this.isMouseDown = true;
        switch (event.target.id) {
            case "projectmove":
                this.leftMouseDown = true;
                break;

            case "propertymove":
                this.rightMouseDown = true;
                break;
        }
        
    }

    render() {
        const { SubMenu }           = Menu;
        var contentHeight: number   = this.state.maxHeight - this.headHeight - this.menuBarHeight - this.statusHeight;
        return (
            <div style={{padding:0,margin:0,height:this.clientHeight}}>
                <Menus />
                <MenuBar />
                <div id="projectmove" style={{ cursor: 'w-resize', width: 5, top: 77, left: this.state.projectWidth, height: contentHeight-1, position: 'absolute', zIndex: 30, display: 'block' }} onMouseDown={this.onMouseDown.bind(this)}></div>
                <div id="propertymove" style={{ cursor: 'w-resize', width: 5, top: 77, left: this.clientWidth-this.state.propertyWidth, height: contentHeight-1, position: 'absolute', zIndex: 30, display: 'block' }} onMouseDown={this.onMouseDown.bind(this)}></div>
                <div style={{height:contentHeight,width:'100%'}}>
                    <ProjectPanel width={this.state.projectWidth} height={contentHeight}/>
                    <SceneContent width={this.state.contentWidth} height={contentHeight}/>
                    <PropertyPanel width={this.state.propertyWidth} height={contentHeight}/>
                </div>
                 
            </div>
        );
    }
}