import * as React from 'react';
import { Tabs } from 'antd';
import { MessageUtils, Message } from '../message/MessageUtils';
import { PluginMessage } from '../plugin/events/PluginMessage';
import { PluginVo } from '../plugin/PluginVo';
import { Paths } from '../../utils/Paths';
import { ResizeMessage } from '../resize/events/ResizeMessage';
import { WelcomePanel } from '../welcome/WelcomePanel';
import { ProjectMessage } from '../project/events/ProjectMessage';
import { PluginDecoder } from '../plugin/PluginDecoder';
import path = require('path');
import fs = require('fs');
export interface TabData {
    title: string;
    content?: any;
    key: string;
}
export class Content extends React.Component<any, any>{
    constructor(props:any,content:any) {
        super(props,content);
        this.state = { tabContents: [], activeKey: ''};
        this.registerMessage();
    }

    registerMessage(): void{
        MessageUtils.register(PluginMessage.ADD_PLUGINS, this.onMessage, this);
        MessageUtils.register(ResizeMessage.RESIZE, this.onMessage, this);
        MessageUtils.register(ProjectMessage.INIT_SCENE, this.onMessage, this);
    }

    componentWillMount() {
        const {tabContents,activeKey}   = this.state;
        tabContents[0]                  = { title: "欢迎", Content: <WelcomePanel height={this.props.height}/>, key: "welcome" };
        this.state.activeKey            = 'welcome';
        this.setState(this.state);
    }

    onMessage(event: Message): void{
        switch (event.type) {
            case PluginMessage.ADD_PLUGINS:
                this.onPluginAdd(event.data);
                break;

            case ResizeMessage.RESIZE:
                this.onResize(event.data);
                break;

            case ProjectMessage.INIT_SCENE:
                this.onSceneInit();
                break;
        }
    }

    onSceneInit(): void{
        var curpluginVo: PluginVo       = PluginDecoder.getPlugin('scene');
        this.onPluginAdd(curpluginVo);
    }

    onPluginAdd(data: PluginVo): void{
        const {tabContents,activeKey}   = this.state;
        var open: boolean = false;
        for (var i: number = 0, l: number = tabContents.length; i < l; i++){
            if (tabContents[i].key === data.name) {
                open = true;
                break;
            }
        }
        if (!open) {
            var pluginUrl: string       = "../../plugins/" + data.name + "/" + data.main;
            var pluginClassList: any    = require(pluginUrl);
            var pluginClass: any        = pluginClassList[data.main];
            this.state.activeKey        = data.name;
            tabContents.push({ title: data.title, Content: React.createElement(pluginClass, { width: this.props.width, height: this.props.height, name: data.name }), key: data.name });
            //更新
            this.setState(this.state);
        } else {
            this.setState({ activeKey: data.name });
        }
    }
    
    //新增和删除页签的回调，在 type="editable-card" 时有效
    onEdit(targetkey: string, action: string): void{
        console.log("tab键编辑：", targetkey, action);
        this[action](targetkey);
    }

    remove(targetkey: string): void{
        const {tabContents} = this.state;
        for (var i: number = 0, l: number = tabContents.length; i < l; i++) {
            if (tabContents[i].key === targetkey) {
                tabContents.splice(i, 1);
                break;
            }
        }
        this.setState({ tabContents });
    }

    onChange(activeKey:string): void{
        this.setState({ activeKey: activeKey });
    }

    private onResize(data:any): void{
        this.setState(this.state);
    }

    render() {
        let TabPane                         = Tabs.TabPane;
        const {tabContents,activeKey}       = this.state;
        return (
            <Tabs style={{width:this.props.width,height:this.props.height,float:'left',background: '#1E1E1E'}} activeKey={activeKey} type="editable-card" hideAdd={true} animated={false} onEdit={this.onEdit.bind(this)} onChange={this.onChange.bind(this)}>
                {tabContents.map(pane => <TabPane tab={pane.title} key={pane.key}>{pane.Content}</TabPane>)}
            </Tabs>
        );
    }
}