import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Modal, Button, Input, Form, Icon, Checkbox, Upload, Dropdown, Menu, message } from 'antd';
import { MenuType } from '../menu/enum/MenuType';
import { BaseSprite } from '../../utils/BaseSprite';
import { E_ProjectCreateProject } from './events/E_Project_CreateProject';
import electron from 'electron';
import { Global } from '../../utils/Global';
import { Project } from './data/Project';
import { MessageUtils } from '../message/MessageUtils';
import { ProjectMessage } from './events/ProjectMessage';
import { Paths } from '../../utils/Paths';
import os = require('os');
import path = require('path');
const ipcRender = require('electron').ipcRenderer;
export class CreateProjectWindow extends React.Component<any, any>{
    private selects: any[] = [
        [
            { width: 414, height: 736, title: 'iPhone 6 Plus (414X736)' },
            { width: 375, height: 667, title: 'iPhone 6 (375X667)' },
            { width: 320, height: 640, title: 'iPhone 5 (320X640)' },
            { width: 360, height: 640, title: 'Android Mobile (375X667)' }
        ],
        [
            { width: 768, height: 1024, title: 'iPad (768X1024)' },
            { width: 1024, height: 1366, title: 'iPad Pro (1024X1366)' },
            { width: 768, height: 1024, title: 'Android Tablet (768X1024)' }
        ],
        [
            { width: 1440, height: 960, title: 'Surface Pro 3 (1440X960)' },
            { width: 1368, height: 912, title: 'Surface Pro 4 (1368X912)' },
            { width: 1280, height: 800, title: 'PC 1280 (1280X800)' },
            { width: 1366, height: 768, title: 'PC 1366 (1366X768)' },
            { width: 1920, height: 1080, title: 'PC 1920 (1920X1080)' }
        ],
        []
    ];
    constructor(props:any,context:any) {
        super(props, context);
        var selectItem: any = this.selects[0][0];
        this.state      = {
            visible: true,
            type: 1,
            basePath: Paths.documentsDirectory,
            screenWidth: selectItem.width,
            screenHeight: selectItem.height,
            projectName: '',
            selectType: 0,
            selectIndex: 0,
            showSelect: true,
            selectTitle: selectItem.title
        };
        this.onMessage();
    }

    onMessage(): void{
        ipcRender.on('on-project-open-project-dir-callback', (event, paths:string[]) => {
            if (paths && paths.length > 0) {
                //这里不支持多选，取第1个
                const {basePath}    = this.state;
                var path: string    = paths[0];
                this.state.basePath = path;
                this.setState(this.state);

                if(this.state.projectName)
                    Global.currentProject.basePath = path + "\\" + this.state.projectName;
                else
                    Global.currentProject.basePath = path;
            }
            console.log('选择的路径：', paths); 
        });
    }

    showModal(): void {
        this.setState({
            visible: true,
        });
    }

    handleCancel(e): void {
        this.setState({
            visible: false,
        });
    }

    handleOk(): void {
        if (this.checkValid()) {
            this.setState({
                visible: false,
            });

            //创建项目
            MessageUtils.send(ProjectMessage.NEW_PROJECT);
        }
    }

    private checkValid(): boolean{
        if (this.state.projectName == '') {
            message.error('请输入项目名称');
            return false;
        }
        return true;
    }

    handleSubmit(): void {

    }

    handleMenuClick(e): void {
        var selectItemData: string  = e.keyPath[0];
        var selectItems: any[]      = this.selects[this.state.selectType];
        var selectIndex: number     = 0;
        for (let i: number = 0, l: number = selectItems.length; i < l; i++){
            if (selectItems[i].title === selectItemData) {
                selectIndex         = i;
                break;
            }
        }
        let selectItem: any         = selectItems[selectIndex];
        let project: Project        = Global.currentProject;
        project.screenWidth         = selectItem.width;
        project.screenHeight        = selectItem.height;
        this.setState({ selectIndex: selectIndex,screenWidth: selectItem.width, screenHeight: selectItem.height, showSelect: true,selectTitle:selectItem.title });
    }

    onOpenFileClick(): void{
        ipcRender.send('project-open-project-dir');
    }

    onTypeSelected(e): void{
        var selectType: number          = +e.target.id;
        let selectItems: any[]          = this.selects[selectType];
        let selectItem: any             = selectItems[0];
        if (selectItem) {
            let project: Project        = Global.currentProject;
            project.screenWidth         = selectItem.width;
            project.screenHeight        = selectItem.height;
            this.setState({ selectType: selectType, screenWidth: selectItem.width, screenHeight: selectItem.height, showSelect: true,selectTitle:selectItem.title });
        }
        else
            this.setState({ selectType: selectType, showSelect: false });
    }

    private onTextChange(e): void{
        let project: Project                = Global.currentProject;
        switch (e.target.id) {
            case 'screenWidth':
                project.screenWidth         = e.target.value;
                this.setState({ screenWidth: e.target.value });
                break;

            case 'screenHeight':
                project.screenHeight        = e.target.value;
                this.setState({ screenHeight: e.target.value });
                break;

            case "projectName":
                project.name                = e.target.value;
                this.setState({ projectName: e.target.value });
                break;
        }
    }

    render() {
        const {selectType, selectIndex, showSelect,selectTitle} = this.state;
        const MenuItem          = Menu.Item;
        let selectItems: any[]  = this.selects[selectType];
        let selectItem: any     = selectItems[selectIndex];
        let _menus: any[] = [];
        if (selectItem) {
            for (var i: number  = 0, l: number = selectItems.length; i < l; i++){
                var item: any   = <MenuItem key={selectItems[i].title}>{selectItems[i].title}</MenuItem>;
                _menus[i]       = item;
            }
        }
        const menu = <Menu onClick={this.handleMenuClick.bind(this)}>{_menus}</Menu>;
        const {screenWidth, screenHeight} = this.state;
        return (<div>
            <Modal title="新建项目" visible={this.state.visible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)}>
                <div>
                    <Input id="projectName" addonBefore="项目名称" defaultValue="" style={{ marginBottom: 16,width:435 }} placeholder="请输入项目名称" onChange={this.onTextChange.bind(this)}/>
                </div>
                <div style={{ marginBottom: 16 ,display:'flex',flexDirection: 'row',width:'100%'}}>
                    <Input addonBefore="项目位置" value={this.state.basePath} style={{ width: 368 }} onChange={this.onTextChange.bind(this)}/>
                    <Button onClick={this.onOpenFileClick.bind(this)}>浏览...</Button>
                </div>
                <div onClick={this.onTypeSelected.bind(this)}>
                    <div id='0' className='createproject-typeSelect'> <img id='0' src="assets/editor/project/mobile.png"/></div>
                    <div id='1' className='createproject-typeSelect'> <img id='1' src="assets/editor/project/tablet.png"/></div>
                    <div id='2' className='createproject-typeSelect'> <img id='2' src="assets/editor/project/web.png" /></div>
                    <div id='3' className='createproject-typeSelect'> <img id='3' src="assets/editor/project/custom.png"/></div> 
                </div>
                <div>
                    <Input id='screenWidth' addonBefore="屏幕宽度" style={{width:435}} value={screenWidth} onChange={this.onTextChange.bind(this)}/>
                    <Input id='screenHeight' addonBefore="屏幕高度" style={{width:435}} value={screenHeight} onChange={this.onTextChange.bind(this)}/>
                </div>
                {
                    showSelect && <Dropdown overlay={menu}>
                    <Button type="ghost" style={{ marginTop: 10 }}>
                        {selectTitle} <Icon type="down" />
                    </Button>
                    </Dropdown>
                }
            </Modal>
        </div>);
    }
}