import * as React from 'react'
import { connect } from 'react-redux'
import * as cx from 'classnames'
import { FormFieldWrapper, BaseFormField } from '.'
import { FORM_REDUCER_KEY } from '../reducers'
import { mapStateToField } from '../selectors'
import { DateTimeInputProps, DateTimeInputComponentProps, AbstractFormField } from '../interfaces'
import { setFormField } from '../actions'

const styles = require('../../src/styles/components/forms.scss')

class Component extends BaseFormField<string> {

    public renderField() {
        // console.log('RENDER DATETIME', this.getValue())

        const { name, disabled, placeholder } = this.props
        return (
            <input
                ref={this.setFieldRef}
                className={this.classNames(styles.datetime)}
                name={name}
                id={`${name}Field`}
                placeholder={placeholder}
                type="datetime-local"
                value={this.getValueFromState()}
                disabled={disabled}
                onChange={this.onChange}
                onFocus={this.onFocus}
                onBlur={this.onBlur} />
        )
    }
}

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

const mapDispatchToProps = {
    setFormField,
}

const ConnectedDateTimeInput = connect(mapStateToProps, mapDispatchToProps)(Component)

export class DateTimeInput extends FormFieldWrapper<DateTimeInputProps> {
    public render() {
        return (
            <ConnectedDateTimeInput {...this.props} formName={this.formName} />
        )
    }
}