import * as React from 'react';
import { Tabs, Tree } from 'antd';
import { Paths } from '../../utils/Paths';
import { FileUtils, FileVo } from '../../utils/FileUtils';
import { MessageUtils } from '../message/MessageUtils';
import { ProjectMessage } from './events/ProjectMessage';
import { Project } from './data/Project';
import { Global } from '../../utils/Global';
import { HierarchyTab } from '../hierarchy/HierarchyTab';
export interface Props {
    width: number;
    height: number;
}

export class ProjectPanel extends React.Component<Props, any>{
    private _treeNodes: any;
    private _hierarchyTab: HierarchyTab;
    constructor(props: Props, context: any) {
        super(props, context);
        this.state = {
            treeNodes: []
        };

        this.registerMessage();
    }

    private registerMessage(): void {
        MessageUtils.register(ProjectMessage.INIT_PROJECT_TREE, this.onMessage, this);
    }

    private onMessage(event: ProjectMessage): void {
        switch (event.type) {
            case ProjectMessage.INIT_PROJECT_TREE:
                this.onShowProjectTree(event.data);
                break;
        }
    }

    onShowProjectTree(url: string): void {
        const TreeNode = Tree.TreeNode;
        let file: FileVo = FileUtils.getDirectionListing(url, [".ts", ".jpg", ".jpeg", ".png", ".mp3"]);
        //将项目包含的游戏对象添加进来
        this.onGameObjectInit();

        const loop = data => data.map((item: FileVo) => {
            const itemdata: any = <div style={{ color: '#fff', fontSize: 14 }}>{item.fileName}</div>
            if (item.children)
                return <TreeNode title={itemdata} key={item.url}>{loop(item.children)}</TreeNode>;
            return <TreeNode title={itemdata} key={item.url} isLeaf={item.isLeaf} />;
        });
        this.setState({ treeNodes: loop(file.children) });

        MessageUtils.send(ProjectMessage.INIT_SCENE);
    }

    onGameObjectInit(): void {
        var gameObject: els.GameObject = new els.GameObject();
        var project: Project = Global.currentProject;
    }

    onSelect(selectedKeys, e: { delected: boolean, selectedNodes, node, event }) {
        console.log(selectedKeys,e.node);
    }

    onCheck(info) {

    }

    onRightMenu(data: { event, node }) {
        const ipcRender = require('electron').ipcRenderer;
        ipcRender.send('menu-project-rightmenu');
    }

    onTabChanged(data) {
        egret.setTimeout(() => {
            switch (data) {
                case "gameobject":
                    if (this._hierarchyTab) 
                        this._hierarchyTab.onShowGameobjectTree();    
                    break;
            }
        }, this, 10);
    }

    render() {
        const TabPane = Tabs.TabPane;
        const TreeNode = Tree.TreeNode;
        return (
            <div style={{ height: this.props.height, width: this.props.width, background: '#252526', float: 'left' }}>
                <Tabs type='card' style={{ width: '100%', height: this.props.height - 30, padding: 0, margin: 0, overflow: 'auto' }} animated={false} onChange={this.onTabChanged.bind(this)}>
                    <TabPane tab="项目" key="project" style={{ position: 'absolute', width: '100%' }}>
                        <Tree showLine onSelect={this.onSelect.bind(this)} onCheck={this.onCheck.bind(this)} onRightClick={this.onRightMenu.bind(this)}>
                            {this.state.treeNodes}
                        </Tree>
                    </TabPane>
                    <TabPane tab="游戏对象" key="gameobject" style={{ position: 'absolute', width: '100%' }}>
                        <HierarchyTab ref={self => { this._hierarchyTab = self } }></HierarchyTab>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}