import * as React from 'react';
import { Select, Input } from 'antd';
export interface IPropertyTransform{
    value: any;
    name: string;
    onChanged: Function;
}

export class PropertyTransform extends React.Component<IPropertyTransform, any>{
    constructor(props, context) {
        super(props, context);
        this.state = { value: this.props.value };
    }

    updateProperty(name: string, value: any) {
        if (this.props.name === name)
            this.setState({ value: value });
    }

    handleChange(event) {
        let value = event.target.value;
        if (typeof this.state.value === 'number')
            value       = parseFloat(value.replace(/^-?\d+\.\d+$/g, ''));
        this.setState({ value: value });
        this.props.onChanged({ name: this.props.name, value: value });
    }

    onSelect(value) {
        //
        value = value === 'true' ? true : false;
        this.setState({ value: value });
        this.props.onChanged({ name: this.props.name, value: value });
    }

    componentWillReceiveProps(nextProps:any){
        this.setState({ value: nextProps.value, name: nextProps.name });
        
    }

    onMouseOver(e) {
        e.target.title = this.state.value.toString();
    }

    render() {
        let Option = Select.Option;
        let baseInput;
        if (typeof this.state.value === 'boolean') {
            baseInput = <Select defaultValue={this.state.value.toString()} style={{ width: '100%' }} onSelect={this.onSelect.bind(this)}>
                <Option value={'true'}>是</Option>
                <Option value={'false'}>否</Option>
            </Select>;
        } else {
            if (this.props.name == 'UID')
                    baseInput = <div>{this.state.value+''}</div>;
                else
                    baseInput = <Input style={{ float: 'right', minWidth: 50 }} value={this.state.value} onChange={this.handleChange.bind(this)}/>;
        }
        let _render =
            <tr key={this.props.name}>
                <td style={{ width: '25%' }}><div style={{ float: 'left',paddingRight:10 }}>{this.props.name}</div></td>
                <td style={{ float: 'right', width: '100%', marginBottom: 3 }} onMouseOver={this.onMouseOver.bind(this)}>{baseInput}</td>   
            </tr>;
        return (_render);
    }
}