import React, { Component } from 'react';
import classNames from 'classnames';

import './style.css';

interface ContainerProps {
    value: string;
    onChange(event: EventTarget, value: any): void;
}

const MyContainer = (WrappedComponent: any) =>
    class MyContainer extends Component<ContainerProps, any> {
        constructor(props: ContainerProps) {
            super(props);
            this.state = {
                name: this.props.value || ''
            };
            this.onNameChange = this.onNameChange.bind(this);
        }
        onNameChange(event: any) {
            this.setState({ name: event.target.value });
            if (this.props.onChange) {
                this.props.onChange(event, event.target.value);
            }
        }
        componentWillReceiveProps({ value }: ContainerProps) {
            if (value) {
                this.setState({ name: value });
            }
        }
        render() {
            const newProps = {
                name: {
                    value: this.state.name,
                    onChange: this.onNameChange
                }
            };
            return <WrappedComponent {...this.props} {...newProps} />;
        }
    };

interface InputProps {
    type: string;
    autoFocus: boolean;
    value: string;
    name: object;
    placeholder: string;
    onFocus(): void;
    onBlur(): void;
}

class Input extends Component<InputProps> {
    static defaultProps = {
        type: 'text'
    };
    constructor(props: InputProps) {
        super(props);
        this.state = {
            focusState: false
        };
    }
    focusCtrl(focusState: boolean) {
        this.setState({ focusState });
        const { onBlur = () => { }, onFocus = () => { } } = this.props;
        focusState ? onFocus() : onBlur();
    }
    render() {
        const { type, autoFocus } = this.props;
        const { focusState }: any = this.state;
        const focusClass = classNames({
            'focus-border': focusState,
            'input-box': true
        });
        return (
            <div className={focusClass}>
                {type === 'text' ? (
                    <input
                        type="text"
                        onFocus={this.focusCtrl.bind(this, true)}
                        onBlur={this.focusCtrl.bind(this, false)}
                        placeholder={this.props.placeholder}
                        readOnly={this.props.placeholder !== '请输入'}
                        autoFocus={autoFocus}
                        {...this.props.name}
                    />
                ) : (
                        <textarea
                            {...this.props.name}
                            onFocus={this.focusCtrl.bind(this, true)}
                            onBlur={this.focusCtrl.bind(this, false)}
                            placeholder={this.props.placeholder}
                        >
                            {this.props.value}
                        </textarea>
                    )}
            </div>
        );
    }
}

export default MyContainer(Input);