/* tslint:disable:jsx-no-lambda */
import * as React from 'react';
import { connect } from 'react-redux'
import { resetForm, destroyForm } from '../actions'
import {
    updateJobField,
    updateVehicleField,
    EXAMPLE_FORM_KEY,
} from './example-actions'
import { FormHandler, FormModel, Location } from '../interfaces'
import {
    Column,
    Text,
    Header,
    DateTimeInput,
    Form,
    FormGroup,
    AddressInput,
    PhoneInput,
    NumberInput,
    // FormBox,  // THESE FORM COMPONENTS NEED TO BE BROUGHT ONTO THE NEW SYSTEM
    // RadioButton,
    // RadioGroup,
    Select,
    TextInput,
    Button,
} from '../web'
import { formatDateForInput } from '../validators'

const mockLocation = {
    address: {
        streets: [
            '2 Upland Crescent',
            'Leeds',
        ],
        locality: 'Leeds',
        town: 'Leeds',
        country: 'GBR',
        postcode: 'LS8 2TB',
    },
    position: {
        coordinates: [
            -1.509331,
            53.820307,
        ],
        type: 'Point',
    },
}

const mockDate = '2017-06-14T15:11:55.170Z'

const mockPhoneNumber = '07790054721'

interface FormExampleProps {
    job: any
    resetForm: (formName: string) => any
    destroyForm: (formName: string) => any
    vehicles: any[]
    selectedVehicle: any
    updateJobField: FormHandler<string>
    updateVehicleField: FormHandler<any>
}

export class _FormExample extends React.Component<FormExampleProps, any> {

    public onSubmit = (formData: FormModel) => console.log('FORM DATA IS VALID', formData)

    public render() {
        console.log('render form example', this.props)
        const { vehicles, job, selectedVehicle, resetForm, destroyForm } = this.props
        return (
            <Column fullWidth style={{
                backgroundColor: 'white',
                boxSizing: 'border-box',
                padding: '20px',
            }}>
                <Form
                    name={EXAMPLE_FORM_KEY}
                    onSubmit={this.onSubmit}>

                    <Header primary={true}>A demo form</Header>

                    <FormGroup label="Enter some new text (with autofocus)">
                        <TextInput
                            autofocus={true}
                            name="textInput"
                            placeholder="placeholder text" />
                    </FormGroup>

                    <FormGroup label="Change an existing job number">
                        <TextInput
                            name="jobNumber"
                            onChange={this.props.updateJobField}
                            value={job.jobNumber} />
                    </FormGroup>

                    <FormGroup label="This text field is disabled">
                        <TextInput
                            name="disabledTextInput"
                            value="initial value"
                            disabled={true} />
                    </FormGroup>

                    <FormGroup label="Enter a number (required)">
                        <NumberInput
                            name="numberInputRequired"/>
                    </FormGroup>

                    <FormGroup label="Enter a number (not required)">
                        <NumberInput
                            name="numberInputOptional"
                            required={false} />
                    </FormGroup>

                    < FormGroup label="Enter a date" >
                        <DateTimeInput
                            name="datetTimeInput"
                            placeholder="placeholder text" />
                    </FormGroup >

                    <FormGroup label="Display an existing date">
                        <DateTimeInput
                            name="datetTimeDisplay"
                            value={formatDateForInput(mockDate)} />
                    </FormGroup>

                    <FormGroup label="Select (with preselected)">
                        <Select
                            name="selectedVehicle"
                            value={this.props.selectedVehicle}
                            onChange={this.props.updateVehicleField}
                            options={vehicles} />
                    </FormGroup>

                    <p>The document type associated with this vehicle is:&nbsp;
                        {selectedVehicle.documentLabel}</p>

                    <FormGroup label="Select (pristine)">
                        <Select
                            name="selectedVehicle2"
                            options={vehicles} />
                    </FormGroup>

                    {/* THE ADDRESS INPUT ISN'T READY YET - DISPLAY ONLY
                    <FormGroup label="Search for an address">
                        <AddressInput
                            name="searchAddress"
                            required={false}/>
                    </FormGroup>
                    */}

                    <FormGroup label="Display an existing address">
                        <AddressInput
                            disabled={true}
                            name="disabledAddress"
                            asyncValue={mockLocation} />
                    </FormGroup>

                    <FormGroup label="Enter a phone number">
                        <PhoneInput
                            name="phone" />
                    </FormGroup>

                    <FormGroup label="Display an existing phone number">
                        <PhoneInput
                            name="disabledPhone"
                            value={mockPhoneNumber} />
                    </FormGroup>

                    <Button type="submit">Submit the form</Button>
                    <Button onClick={() => resetForm(EXAMPLE_FORM_KEY)}>Reset the form</Button>
                    <Button onClick={() => destroyForm(EXAMPLE_FORM_KEY)}>Destroy the form</Button>

                </Form>
            </Column>
        )
    }
}

const mapDispatchToProps = {
    resetForm,
    destroyForm,
    updateJobField,
    updateVehicleField,
}

const mapStateToProps = (state: any) => ({
    job: state.example.job,
    vehicles: state.example.vehicles,
    selectedVehicle: state.example.selectedVehicle,
})

export const FormExample = connect(mapStateToProps, mapDispatchToProps)(_FormExample)
/* tslint:enable:jsx-no-lambda */