import * as React from 'react';
import { SelectItemProperty } from '../../module/plugin/SelectItemProperty';
const Input = require('antd/lib/input');
const Select = require('antd/lib/select');
export class EditableCell extends React.Component<any, any>{
    cacheValue: boolean;
    constructor(props: any, context: any) {
        super(props, context);

        this.state = {
            value: this.props.value,
            editable: this.props.editable || false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.editable !== this.state.editable) {
            this.setState({ editable: nextProps.editable });
            if (nextProps.editable) {
                this.cacheValue = this.state.value;
            }
        }
        
        if (nextProps.status && nextProps.status !== this.props.status) {
            if (nextProps.status === '保存') {
                this.props.onChange(this.state.value);
            } else if (nextProps.status === '取消') {
                this.setState({ value: this.cacheValue });
                this.props.onChange(this.cacheValue);
            }
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.editable !== this.state.editable || nextProps.value !== this.state.value;
    }

    handleChange(e) {
        this.setState({ value:e.target.value });
    }

    onSelectChangled(value) {
        this.setState({ value:value });
    }

    render() {
        const { value, editable }                   = this.state;
        const Option                                = Select.Option;
        var renderItem: any;
        if (editable) {
            var property: any                       = this.props.property;
            if (!property) {
                renderItem                          = <Input value={value} onChange={e => this.handleChange(e)} />;
            } else {
                var editType: string                = property.editType;
                switch (editType) {
                    case 'select':
                        var options: any[]          = [];
                        for (var i: number = 0, l: number = property.selects.length; i < l; i++) {
                            var selectProperty: SelectItemProperty = property.selects[i];
                            var selectRender: any   = <Option key={selectProperty.value} value={selectProperty.value.toString()}>{selectProperty.label}</Option>;
                            options[i]              = selectRender;
                        }
                        renderItem                  = <Select defaultValue={value.toString()} style={{ width: 120 }} onChange={e => this.onSelectChangled(e)}>{options}</Select>;
                        break;

                    case 'input':
                        renderItem                  = <Input value={value} onChange={e => this.handleChange(e)} />;
                        break;

                    default:
                        renderItem                  = value.toString() || ' ';
                        break;
                }
            }
        }
        return (<div>
            {
                editable ?
                    <div>
                        {renderItem}
                    </div>
                    :
                    <div className="editable-row-text">
                        {value.toString() || ' '}
                    </div>
            }
        </div>);
    }
}