import * as React from 'react'
import { connect } from 'react-redux'
import { TextInput as NativeComponent } from 'react-native'
import { FormFieldWrapper, MobileFormField } from '../form-field'
import { TextInputProps, TextInputComponentProps } from './interfaces'
import { setFormField, mapStateToField, FORM_REDUCER_KEY } from '../form'
import { NativeSyntheticEvent } from 'react-native'

class _TextInput extends MobileFormField<string> {

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

        return (
            <NativeComponent
                ref={this.setFieldRef}
                style={this.styles()}
                placeholder={placeholder}
                onChange={this.onChange}
                value={this.getValueFromState()}/>
        )
    }
}

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} />
    }
}