import * as React from 'react'
import { connect } from 'react-redux'
import { FormFieldWrapper, BaseFormField } from '.'
import { FORM_REDUCER_KEY } from '../reducers'
import { createAsyncFormField } from '../data'
import { mapStateToField } from '../selectors'
import {
    Location,
    AddressInputProps,
} from '../interfaces'
import { Spinner } from '.'
import { setFormField, searchAddress } from '../actions'

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

class _AddressInput extends BaseFormField<string> {

    // TODO - implement the async stuff
    // renderSpinner(): JSX.Element {
    //     return <Spinner visible={this.props.field.loading} />
    // }

    public renderField() {
        const { name, disabled, placeholder } = this.props
        // console.log('render text input', this.props)
        return (
            <input
                ref={this.setFieldRef}
                className={this.classNames()}
                name={name}
                id={`${name}Field`}
                placeholder={placeholder}
                type="text"
                value={this.parseAsyncValue()}
                disabled={disabled}
                onChange={this.onChange}
                onFocus={this.onFocus}
                onBlur={this.onBlur} />
        )
    }

    public validate() {
        const { asyncValue } = this.props.field
        if (!asyncValue || !asyncValue.address) {
            return ['* required']
        }
        if (!asyncValue.address.postcode) {
            return ['* valid UK post code required']
        }

        if (!asyncValue.address.town) {
            return ['* valid UK city required']
        }
        return []
    }

    private parseAsyncValue() {
        const { asyncValue } = this.props.field
        // console.log('PARSING ADDRESS VALUE', asyncValue )
        if (asyncValue) {
            return [
                asyncValue.address.streets.join(', '),
                asyncValue.address.postcode,
            ].join(', ')
        }
        return this.getValueFromState()
    }

}

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

const mapDispatchToProps = {
    setFormField,
    asyncOnChange: searchAddress,
}

const ConnectedAddressInput = connect(mapStateToProps, mapDispatchToProps)(_AddressInput)

export class AddressInput extends FormFieldWrapper<AddressInputProps> {
    public render() {
        return (
            <ConnectedAddressInput {...this.props} formName={this.formName} />
        )
    }
}