import React from 'react';
import DateTime from 'react-datetime';
import moment from 'moment';


/**
 * Button:
 *  types: none,'danger','warning'
 **/

export default class SimpleFormField extends React.Component {

    static get propTypes() {
        return {
            type: React.PropTypes.string.isRequired,
            disabled: React.PropTypes.bool,
            placeholder: React.PropTypes.string,
            fieldClass: React.PropTypes.string,
            buttonTitle: React.PropTypes.string,
            buttonDisabled: React.PropTypes.bool,
            buttonLoading: React.PropTypes.bool,

            className: React.PropTypes.string,
            dataSource: React.PropTypes.array,
            style: React.PropTypes.object,
            onClick: React.PropTypes.func,
            onChange: React.PropTypes.func,
            validate: React.PropTypes.func,
            autoFocus: React.PropTypes.bool 
        };
    }

    constructor(props) {
        super(props);

        this.state = {
            uploadedFileName: 'Choose a file'
        };

        this.getRenderFunctionMap = {
            Select: this.createSelectBoxField,
            Input: this.createInputBoxField,
            Textarea: this.createTextAreaField,
            Button: this.createButton,
            Upload: this.createUpload,
            Checkbox: this.createCheckbox,
            DateTime: this.createDateTime
        };
    }

    isValidDateTime = (current) => {
        let minDate = moment().subtract(1, 'day'), maxDate = moment().add(10, 'year');
        if (this.props.minDate) {
            minDate = moment(this.props.minDate).subtract(1, 'day');
        }
        if (this.props.maxDate) {
            maxDate = moment(this.props.maxDate).add(1, 'day');
        }
        return current.isAfter(minDate) && current.isBefore(maxDate);
    };

    handleDateTimeChange = (val) => {
        if (val && this.props.onChange) {
            this.props.onChange(val.valueOf());
        }
    };

    createDateTime = () => {
        return (
            <div
                className={`form-field-content date-time-simple ${this.props.fieldClass ? this.props.fieldClass : ''}`}>
                <DateTime dateFormat='MMM D, YYYY' isValidDate={this.isValidDateTime}
                          onChange={this.handleDateTimeChange}/>
            </div>
        )
    };

    createCheckbox = () => {
        return (
            <label className={`form-field-content checkbox ${this.props.fieldClass ? this.props.fieldClass : ''}`}>
                <input
                    type="checkbox"
                    checked={this.props.isChecked}
                    onChange={this.props.onChange}
                />
                <span>{this.props.label}</span>
            </label>
        )
    };

    createUpload = () => {
        return (
            <div className={`form-field-content upload ${this.props.fieldClass ? this.props.fieldClass : ''}`}>
                <input type="file" name="file-2[]" id="file-2" className="inputfile inputfile-button"
                       onChange={this.handleUpload}/>
                <label htmlFor="file-2" title={this.state.uploadedFileName}>
                    <i className="material-icons">&#xE2C6;</i>
                    <span>{this.state.uploadedFileName}</span></label>
            </div>
        )
    };

    createButton = () => {
        if (this.props.buttonTitle) {
            return (
                <div
                    className={`form-field-content button ${this.props.fieldClass ? this.props.fieldClass : ''} ${this.props.buttonLoading ? 'disabled' : ''}`}>
                    <button onClick={this.props.onClick}
                            disabled={this.props.buttonDisabled ? this.props.buttonDisabled : false}>
                        <div className="flex align-horizontal-center align-vertical-center">
                            {
                                this.props.buttonLoading ?
                                    (<div className="spinner">
                                        <div className="bounce1"></div>
                                        <div className="bounce2"></div>
                                        <div className="bounce3"></div>
                                    </div>) : (<span>{this.props.buttonTitle}</span>)
                            }
                        </div>
                    </button>
                </div>
            )
        }
        return null;
    };

    createInputBoxField = () => {
        return (
            <div
                className={`form-field-content input-simple ${this.state.valid === false ? 'invalid' : ''} ${this.props.fieldClass ? this.props.fieldClass : ''}`}>
                <input placeholder={this.props.placeholder} onChange={this.handleOnChange} autoFocus={this.props.autoFocus}/>
                <span>{this.state.error}</span>
            </div>
        )
    };

    createTextAreaField = () => {
        return (
            <div
                className={`form-field-content input-simple ${this.state.valid === false ? 'invalid' : ''} ${this.props.fieldClass ? this.props.fieldClass : ''}`}>
                <textarea placeholder={this.props.placeholder} onChange={this.handleOnChange} />
                <span>{this.state.error}</span>
            </div>
        )
    }

    handleUpload = (event) => {
        this.setState({
            uploadedFileName: event.target.files[0].name
        });
        this.props.onChange(event.target.files[0]);
    };

    handleOnChange = (e) => {
        this.props.onChange(e.target.value);
        if (this.props.validate) {
            this.setState(this.props.validate(e.target.value));
        }
    };

    createSelectBoxField = () => {
        if (this.props.dataSource) {
            return (
                <div
                    className={`form-field-content dropdown-simple ${this.props.fieldClass ? this.props.fieldClass : ''}`}>
                    <select defaultValue="" required onChange={this.handleOnChange}>
                        <option value="" disabled>
                            {this.props.placeholder ? this.props.placeholder : 'Select'}
                        </option>
                        {
                            this.props.dataSource.map((data, i) => (
                                    <option key={i} value={data.value}>
                                        {data.label}
                                    </option>
                                )
                            )
                        }
                    </select>
                </div>
            )
        }
        return null;
    };

    createTitle() {
        if (this.props.title) {
            return (<div className='form-field-header'>{this.props.title}</div>);
        }
        return null;
    }


    createField() {
        if (this.props.type) {
            if (this.getRenderFunctionMap[this.props.type]) {
                return this.getRenderFunctionMap[this.props.type]();
            }
        }
        return (null);
    }

    render() {
        return (
            <div style={this.props.style}
                 className={`form-field-container ${this.props.className ? this.props.className : ''} ${typeof this.props.disabled === 'boolean' && this.props.disabled ? 'disabled' : ''}`}>
                {this.createTitle()}
                {this.createField()}
            </div>
        );
    }
};
