import * as React from 'react';
import { TimePicker, Menu, Icon } from 'antd';
import { Global } from '../../../utils/Global';
import { PropertyPanel } from './PropertyPanel';
export class PropertyChoosePanel extends React.Component<{ visible: boolean, owner: PropertyPanel }, any>{
    constructor(props: { visible: boolean, owner: PropertyPanel }, context: any) {
        super(props, context);
    }

    private handleClick(e) {
        
    }

    private onOpenChange(openKeys:string[]) {
        // console.log(openKeys);
    }

    private onSelect(data: { item, key, selectedKeys }) {
        this.props.owner.onComponentAdd(data);
        this.props.owner.setState({ chooseVisible: false });
    }

    render() {
        const SubMenu       = Menu.SubMenu;
        const rendererComponents: any[]  = [];
        if (Global.elsRendererComponents) {
            for (let key in Global.elsRendererComponents) {
                rendererComponents.push(<Menu.Item key={key}>{Global.elsRendererComponents[key]}</Menu.Item>);
            }
        }

        const commonComponents: any[] = [];
        if (Global.elsCommonComponents) {
            for (let key in Global.elsCommonComponents) {
                commonComponents.push(<Menu.Item key={key}>{Global.elsCommonComponents[key]}</Menu.Item>);
            }
        }

        const displayState: string = (this.props.visible ? "block" : "none");
        return (
            <div style={{ position: "absolute", display: displayState, width: 230, height: 320, background: "#232323", left: 15, bottom: 40, borderColor: "#888888", overflowY: 'auto'  }}>
                <Menu
                    mode="inline"
                    style={{ width: '100%',height:320}}
                    onOpenChange={this.onOpenChange.bind(this)}
                    onClick={this.handleClick.bind(this)}
                    onSelect={this.onSelect.bind(this)}
                    theme="dark"
                    >
                    <SubMenu key="scriptUI" title={<span><Icon type="mail" /><span>UI</span></span>}>
                        {rendererComponents}
                    </SubMenu>
                    <SubMenu key="scriptCommon" title={<span><Icon type="mail" /><span>Common</span></span>}>
                        {commonComponents}
                    </SubMenu>
                    <SubMenu key="scriptNew" title={<span><Icon type="appstore" /><span>新脚本</span></span>}>
                        <Menu.Item key="createNewScript">NewTypesScript</Menu.Item>
                    </SubMenu>
                </Menu>
            </div>
        );
    }
}