import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SceneContentPanel } from './content/SceneContentPanel';
import { SceneProperty } from './property/SceneProperty';
import { SceneToolBar } from './toolbar/SceneToolBar';
import { Button } from 'antd';
import { Message, MessageUtils } from '../../module/message/MessageUtils';
import { TsParser } from '../../module/property/view/TsParser';
import { PropertyMessage } from '../../module/property/events/PropertyMessage';
import { Global } from '../../utils/Global';
import { Paths } from '../../utils/Paths';
import fs   = require('fs');
import './SceneRender';
import { SceneMessage } from './events/SceneMessage';
export class SceneEditorPanel extends React.Component<any, any>{
    private contentWindow: Window;
    private istage: egret.Stage;
    private egretPlayer: any;
    private documentInst: egret.DisplayObject;
    private scene: els.Scene;
    private sceneGUI: HTMLElement;
    private iframe;
    constructor(props, context) {
        super(props, context);
        this.state = {
            editType: true,
            customRender: <div></div>,
            stageWidth: 640,
            stageHeight:1136
        };
        els.ElsMode.mode = 1;
    }

    componentDidMount() {
        egret.runEgret({ renderMode: 'webgl' });
    }

    private onChangedEditType(e): void {
        if (els)
            els.ElsMode.mode = (this.state.editType) ? 0 : 1;
        if (this.documentInst) {
            this.scene = this.documentInst['scene'];
        }
        this.setState({ editType: !this.state.editType });

        if (!this.state.editType) {
            egret.runEgret({ renderMode: 'webgl' });
        } else {
            //这里egret没有开放重新刷新页面的接口，TODO
        }
    }

    private onIframeLoad(event) {
        this.iframe = event.target;
        this.contentWindow = this.iframe.contentWindow;
        if (!this.contentWindow || !this.contentWindow['egret'])
            return;
        Global.contentWindow = this.contentWindow;
        Global.els = this.contentWindow['els'];
        Global.egret = this.contentWindow['egret'];
        if (Global.els)
            Global.els.ElsMode.mode = 1;

        this.egretPlayer = this.iframe.contentDocument.body.getElementsByClassName('egret-player')[0]['egret-player'];
        this.istage = this.egretPlayer.stage;
        this.documentInst = this.istage.getChildAt(0);

        //设置背景颜色
        this.iframe.contentDocument.body.getElementsByClassName('egret-player')[0].style.background = "#404040";
        this.iframe.contentDocument.body.getElementsByClassName('egret-player')[0].childNodes[1].style.background = "#000";

        //修复移动事件
        this.contentWindow.addEventListener('mousemove', (event) => {
            let _event: Event = new Event('mousemove');
            _event['clientX'] = event.clientX + event.screenX - this.contentWindow.screenLeft;
            _event['clientY'] = event.clientY + event.screenY - this.contentWindow.screenTop;
            window.dispatchEvent(_event);
        });
        // this.egretPlayer.stageWidth = 640;
        // this.istage.stage.stageHeight = 1136;
        //this.setState({ stageWidth: this.istage.stageWidth, stageHeight: this.istage.stageHeight });
        this.contentWindow.addEventListener(els.ComponentEvent.COMPONENTS_INIT_COMPLETE, () => {
            // let editors             = Global.els.Editor.editors;
            // for (let eid in editors) {
            //     this.sceneGUI.appendChild(editors[eid].renderContainer);
            // }

            // let scene: els.Scene = this.documentInst['scene'];
            // for (let i: number = 0, l: number = scene.children.length; i < l; i++) {
            //     let gameobject: els.GameObject = scene.children[i];
            //     gameobject.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (event: egret.TouchEvent) => {
            //         MessageUtils.send(PropertyMessage.SHOW_GAMEOBJECT_PROPERTY, event.currentTarget);
            //     }, this);
            // }
        });

        // MessageUtils.send(SceneMessage.SCENE_INITIALIZE);
    }

    private onContextMenu(event) {
        require('electron').ipcRenderer.send('menu-scene-rightmenu');
        MessageUtils.send(SceneMessage.RIGHT_CLICK, { clientX: event.clientX, clientY: event.clientY });
    }

    render() {
        const {editType} = this.state;
        const btnTitle: string = editType ? '预览模式' : '编辑模式';
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <div onContextMenu={this.onContextMenu.bind(this)} style={{ margin: 'auto', backgroundColor: '#000', border: 0, width: this.props.width, height: this.props.height, float: 'left' }}>
                    <div className='egret-player' style={{display:(editType?"block":"none"), margin: 'auto', width: this.props.width, height: this.props.height }}
                        data-entry-class="SceneRender"
                        data-orientation="auto"
                        data-scale-mode="showAll"
                        data-frame-rate="60"
                        data-content-width={this.state.stageWidth}
                        data-content-height={this.state.stageHeight}
                        data-show-paint-rect="false"
                        data-multi-fingered="2"
                        data-show-fps="false" data-show-log="false"
                        data-log-filter="" data-show-fps-style="x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9">
                    </div>
                </div>
                <iframe style={{display:(editType?"none":"block"), width: '100%', height: '100%',border:1,borderColor:'#585757' }} src={Paths.projectIndexPath} onLoad={this.onIframeLoad.bind(this)}></iframe>
                <div style={{ position: 'absolute' }}>
                    <Button onClick={this.onChangedEditType.bind(this)}>{btnTitle}</Button>
                    <div style={{ color: '#000', width: 400 }} ref={self => { this.sceneGUI = self } }></div>
                </div>
            </div>
        );

        // return (
        //     <div style={{ width: '100%', height: '100%' }}>
        //         <div onContextMenu={this.onContextMenu.bind(this)} style={{ margin: 'auto', backgroundColor: '#000', border: 0, width: this.props.width, height: this.props.height, float: 'left' }}>
        //             <div className='egret-player' style={{display:(editType?"block":"none"), margin: 'auto', width: this.props.width, height: this.props.height }}
        //                 data-entry-class="SceneRender"
        //                 data-orientation="auto"
        //                 data-scale-mode="showAll"
        //                 data-frame-rate="60"
        //                 data-content-width={this.state.stageWidth}
        //                 data-content-height={this.state.stageHeight}
        //                 data-show-paint-rect="false"
        //                 data-multi-fingered="2"
        //                 data-show-fps="false" data-show-log="false"
        //                 data-log-filter="" data-show-fps-style="x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9">
        //             </div>
        //             <iframe style={{display:(editType?"none":"block"), width: '100%', height: '100%',border:1,borderColor:'#585757' }} src={Paths.projectIndexPath} onLoad={this.onIframeLoad.bind(this)}></iframe>
        //         </div>
        //         <div style={{ position: 'absolute' }}>
        //             <Button onClick={this.onChangedEditType.bind(this)}>{btnTitle}</Button>
        //             <div style={{ color: '#000', width: 400 }} ref={self => { this.sceneGUI = self } }></div>
        //         </div>
        //     </div>
        // );
    }
}