import * as React from 'react';
import { EditableCell } from './EditableCell';
import { PluginDecoder } from '../../module/plugin/PluginDecoder';
import { PluginVo } from '../../module/plugin/PluginVo';
import { Property } from '../../module/plugin/Property';
import { BasePlugin } from '../BasePlugin';
import { Global } from '../../utils/Global';
import { Project } from '../../module/project/data/Project';
import { Table,Button } from 'antd';
// const Table         = require('antd/lib/table');
// const Button        = require('antd/lib/button');
const Icon          = require('antd/lib/icon');
const Input         = require('antd/lib/input');
const Select        = require('antd/lib/select');
const Popconfirm    = require('antd/lib/popconfirm');
const ipcRender     = require('electron').ipcRenderer;
import xlsx         = require("node-xlsx");
export class ConfigPanel extends BasePlugin{
    private _cloneSourceItem: any;
    private preID: number = 1000000;
    constructor(props: any, context: any) {
        super(props, context);

        this.state = {
            columns: [],
            data: [],
            selectedRowKeys:[]
        };

        this.onMessage();
    }

    protected onPluginsComplete(plugin: PluginVo) {
        if(plugin)
            this.parseProperties(plugin.properties);
    }

    parseProperties(properties:Property[]): void{
        if (!properties) return;
        this.state.columns.length   = 0;
        this.state.data.length      = 0;
        var sourceItem: any = {};
        sourceItem.UID              = sourceItem.key = this.preID;
        //添加UID
        for (var i: number = 0, l: number = properties.length; i < l; i++){
            let property: Property  = properties[i];
            let columnItem: any     = {};
            columnItem.dataIndex    = property.name;
            columnItem.title        = property.label;
            columnItem.width        = 100;
            columnItem.render       = ((text, record, index) => this.renderColumns(this.state.data, index, property.name, text,property)).bind(this);
            this.state.columns.push(columnItem);
        
            //存储数据源
            sourceItem[property.name] = { editable: false, value: property.value };
        }
        this._cloneSourceItem = this.getItemClone(sourceItem);
        
        //初始化数据源
        var project: Project = Global.currentProject;
        if (project) {
            var plugindata: any = project.plugins[this.props.name];
            if (plugindata) {
                var pluginDataSource: any[] = plugindata.dataSource;
                for (var i: number = 0, l: number = pluginDataSource.length; i < l; i++){
                    var pluginitem: any     = pluginDataSource[i];
                    sourceItem              = {};
                    for (var pkey in pluginitem) {
                        if (pkey === 'key') {
                            sourceItem[pkey] = pluginitem[pkey];
                        } else {
                            sourceItem[pkey] = { editable: false, value: pluginitem[pkey] };
                        }
                    }
                    this.state.data.push(sourceItem); 
                }
            }
        }
        
        //添加操作数
        var columnItem: any         = {};
        columnItem.dataIndex        = 'operation';
        columnItem.title            = '操作';
        columnItem.width            = 150;
        columnItem.render           = (text, record, index) => {
            const { editable }      = this.state.data[index].name;
            return (<div className="editable-row-operations">
                {
                    editable ?
                        <span>
                            <a onClick={(() => this.editDone(index, '保存')).bind(this)} style={{ margin: '0px 10px 0px 10px' }}>保存</a>
                            <Popconfirm title="确定要取消?" onConfirm={(() => this.editDone(index, '取消')).bind(this)}>
                                <a style={{ margin: '0px 10px 0px 10px' }}>取消</a>
                            </Popconfirm>
                            <Popconfirm title="确定要删除?" onConfirm={(() => this.deleteDone(index, '删除')).bind(this)}>
                                <a style={{ margin: '0px 10px 0px 10px' }}>删除</a>
                            </Popconfirm>
                            <Popconfirm title="确定要XX?">
                                <a style={{ margin: '0px 10px 0px 10px' }}>XX</a>
                            </Popconfirm>
                        </span>
                        :
                        <span>
                            <a onClick={(() => this.edit(index)).bind(this)}>编辑</a>
                        </span>
                }
            </div>);
        }
        this.state.columns.push(columnItem);
        this.setState(this.state);
    }

    getItemClone(item: any): any {
        var cloneItems: any     = {};
        for (var itemkey in item) {
            cloneItems[itemkey] = { editable: item[itemkey].editable, value: item[itemkey].value };
        }
        cloneItems.key          = cloneItems.UID = this.preID + this.state.data.length + 1;
        return cloneItems;
    }

    renderColumns(data, index, key, text,property) {
        const { editable, status } = data[index][key];
        if (typeof editable === 'undefined') {
            return text;
        }
        return (<EditableCell
            editable={editable}
            value={text}
            onChange={value => this.handleChange(key, index, value)}
            status={status}
            property={property}
            />);
    }

    handleChange(key, index, value) {
        const { data }          = this.state;
        data[index][key].value  = value;
        this.setState({ data });
    }

    edit(index) {
        const { data }      = this.state;
        Object.keys(data[index]).forEach((item) => {
            if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
                data[index][item].editable = true;
            }
        });
        this.setState({ data });
    }

    editDone(index, type) {
        const { data } = this.state;
        Object.keys(data[index]).forEach((item) => {
            if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
                data[index][item].editable = false;
                data[index][item].status = type;
            }
        });
        this.setState({ data }, () => {
            Object.keys(data[index]).forEach((item) => {
                if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
                    delete data[index][item].status;
                }
            });
        });
    }

    deleteDone(index, type) {
        const { data } = this.state;
        data.splice(index, 1);
        this.setState(this.state);
    }

    private count: number = 2;
    onAdd(): void {
        const {data} = this.state;
        this.count++;
        data.push(this.getItemClone(this._cloneSourceItem));
        this.setState({ data: data });
    }

    onDelete(): void{
        const {data,selectedRowKeys} = this.state;
        var deleteNums: number = 0;
        for (var i: number = selectedRowKeys.length - 1; i >= 0; i--) {
            for (var j: number = 0, jl: number = data.length; j < jl; j++) {
                var dataitem: any = data[j];
                if (dataitem.key == selectedRowKeys[i]) {
                    data.splice(j, 1);
                    selectedRowKeys.splice(i, 1);
                    break;
                }
            }
        }
        this.setState(this.state);
    }

    importExcel(): void{
        ipcRender.send('open-import-excel');
    }

    saveExcel(): void{
        
    }

    onMessage(): void{
        ipcRender.on('on-dialog-import-excel-opened', (event, paths:string[]) => {
            var _path: string           = paths[0];
            var list                    = xlsx.parse(_path);
            if (!list) return;

            const {data, columns}       = this.state;
            var sheet0: any             = list[0];
            var sheetdata: any[]        = sheet0.data;
            if (sheetdata.length === 0) return;
            columns.length              = 0;
            data.length                 = 0;
            var firstRowData: any[]     = sheetdata[0];
            for (var i: number = 0, l: number = firstRowData.length; i < l; i++){
                let item: any           = firstRowData[i];
                let columnItem: any     = {};
                columnItem.dataIndex    = item;
                columnItem.title        = item;
                columnItem.width        = 100;
                columnItem.render       = ((text, record, index) => this.renderColumns(this.state.data, index, item, text,null)).bind(this);
                columns.push(columnItem);
            }

            for (var j: number = 0, jl: number = sheetdata.length; j < jl; j++){
                var itemdata: any       = sheetdata[j];
                var sourceItem          = {};
                for (var i: number = 0, il: number = itemdata.length; i < il; i++) {
                    var item: any = itemdata[i];
                    if (item && item['toString']) {
                        sourceItem[sheetdata[0][i]] = { editable: false, value: item };
                    } else {
                        sourceItem[sheetdata[0][i]] = { editable: false, value: 0 };;
                    }
                }
                data[j]                 = sourceItem;
            }

            this.setState(this.state);
        });
    }

    render() {
        const { data }              = this.state;
        const dataSource            = data.map((item) => {
            const obj               = {};
            Object.keys(item).forEach((key) => {
                obj[key] = key === 'key' ? item[key] : item[key].value;
            });
            return obj;
        });
        const {selectedRowKeys}     = this.state;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ selectedRowKeys });
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User',    // Column configuration not to be checked
            }),
        };
        const hasSelected   = selectedRowKeys.length > 0;
        const columns       = this.state.columns;
        
        //saveData
        var currentProject: Project = Global.currentProject;
        if (currentProject) {
            currentProject.plugins[this.props.name] = { columns: columns, dataSource: dataSource };
        }
        return (
            
            <div style={{ width: this.props.width - 20 }}>
                <div style={{ marginTop: 10, marginRight: 10, marginBottom: 10 }}>
                    <Button/>    
                    <Button type="ghost" style={{ marginLeft: 10 }} onClick={this.onAdd.bind(this)}>添加项</Button>
                    <Popconfirm title="确定要删除选中项?" onConfirm={this.onDelete.bind(this)}>
                         <Button type="ghost" style={{ marginLeft: 10 }} disabled={!hasSelected}>删除项</Button>
                    </Popconfirm>
                    <Button type="ghost" style={{ marginLeft: 10 }} onClick={this.importExcel.bind(this)}>导入Excel</Button>
                    <Button type="ghost" style={{ marginLeft: 10 }} onClick={this.saveExcel.bind(this)}>保存Excel</Button>
                </div>
                <Table bordered dataSource={dataSource} rowSelection={rowSelection} columns={columns} style={{ height: this.props.height - 145, overflow: 'auto', margin: '0 auto' }} />;
            </div>
        );
    }
}