import * as React from 'react'
import { connect } from 'react-redux'
import { WebFormField, FormFieldWrapper, createEmptyFormField } from '../form-field'
import { TextInputProps, TextInputComponentProps } from './interfaces'
import { setFormField, mapStateToField, FORM_REDUCER_KEY } from '../form'

class _TextInput extends WebFormField<string> {

    public renderField() {
        const { name, formName, disabled, placeholder } = this.props

        return (
            <input
                ref={this.setFieldRef}
                className={this.classNames()}
                name={name}
                id = {`${name}Field`}
                placeholder= {placeholder}
                type= "text"
                value= {this.getValueFromState()}
                disabled= {disabled}
                onChange= {this.onChange}
                onFocus= {this.onFocus}
                onBlur= {this.onBlur} />
        )
    }
}

const mapStateToProps = (state: any, ownProps: TextInputProps) => ({
    ...ownProps,
    field: mapStateToField(state[FORM_REDUCER_KEY], ownProps),
})

const mapDispatchToProps = {
    setFormField,
}

const ConnectedTextInput = connect(mapStateToProps, mapDispatchToProps)(_TextInput)

export class TextInput extends FormFieldWrapper<TextInputProps> {
    public render() {
        return <ConnectedTextInput {...this.props} formName={this.formName} />
    }
}