import * as React from 'react';
import { Input } from 'antd';
export interface IPropertyItem{
    componentName: string;
    propvalue: any;
    propkey: string;
    renderDOM?: HTMLElement;
    onChanged: Function;
}

export interface IPropertyChange{
    componentName: string;
    oldProp: { name: string, value: any };
    currentProp: { name: string, value: any };
}

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

    handleChange(event) {
        let oldValue = this.state.value;
        let value = event.target.value;
        if (typeof this.state.value === 'number')
            value       = parseFloat(value.replace(/[^\d]/g, ''));
        this.setState({ value: value });
        let propChange: IPropertyChange = { componentName: this.props.componentName, oldProp: { name: this.props.propkey, value: oldValue }, currentProp: { name: this.props.propkey, value: value } };
        this.props.onChanged(propChange);
    }

    componentWillReceiveProps(nextProps:IPropertyItem){
        this.setState({ value: nextProps.propvalue });
    }

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

    render() {
        let _render;
        if (this.props.renderDOM) {
            _render = <tr key={this.props.propkey}>
                <td style={{ width: '20%' }}><div style={{ float: 'left' }}>{this.props.propkey}</div></td>
                <td style={{ float: 'right', width: '80%', marginBottom: 3 }}><div ref={(self) => {
                    if (self) {
                        while (self.hasChildNodes())
                            self.removeChild(self.firstChild);
                        self.appendChild(this.props.renderDOM);
                    }
                } }></div></td>
            </tr>;
        } else {
            _render = <tr key={this.props.propkey}>
                <td style={{ width: '20%' }}><div style={{ float: 'left' }}>{this.props.propkey}</div></td>
                <td style={{ float: 'right', width: '80%', marginBottom: 3 }} onMouseOver={this.onMouseOver.bind(this)}><Input style={{ float: 'right', minWidth: 120 }} value={this.state.value} onChange={e => this.handleChange(e)} /></td>
            </tr>
        }
        return (_render);
    }
}