import React from 'react';
import {
    Form,
    Input,
    TextArea,
    Segment, Header,
} from 'semantic-ui-react';
import { DateInput } from "semantic-ui-calendar-react";
import { connect } from "react-redux";
import { sendMRIRequest } from '../../actions/BookingActions';

const priorityOptions = [
    { key: 'P1', text: 'P1', value: 'P1' },
    { key: 'P2', text: 'P2', value: 'P2' },
    { key: 'P3', text: 'P3', value: 'P3' },
    { key: 'P4', text: 'P4', value: 'P4' },
    { key: 'P5', text: 'P5', value: 'P5' },
    { key: 'Unidentified', text: 'Unidentified', value: 'Unidentified' },
];


const initialState = {
    reqCIO: "",
    DOB: "",
    height: "",
    inchcm: "",
    weight: "",
    kglbs: "",
    radiologistPriority: "",
    reasonForExam: "",
    examRequested: ""
};

class BookingForm extends React.Component {
    constructor(props){
        super(props);
        this.state = initialState;

        this.handleChange = this.handleChange.bind(this);
        this.handleSelectChange = this.handleSelectChange.bind(this);
        this.handleDateChange = this.handleDateChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        const {name, value} = e.target;
        this.setState({
            [name]: value
        });
    }

    handleSelectChange(e,{name, value}) {
        this.setState({[name]:value});
    }

    handleDateChange = date => {
        this.setState({
            DOB: date
        });
    };

    handleSubmit(e) {
        e.preventDefault();

        this.props.sendMRIRequest({
            "ReqCIO": this.state.reqCIO.trim(),
            "DOB": this.state.DOB.trim(),
            "Height": this.state.height,
            "inch-cm": this.state.inchcm,
            "Weight": this.state.weight,
            "kg-lbs": this.state.kglbs,
            "Radiologist Priority": this.state.radiologistPriority,
            "Reason for Exam": this.state.reasonForExam.trim(),
            "Exam Requested": this.state.examRequested.trim()
        });
    }

    render() {
        return (
            <Segment inverted color='blue'>
                <Header as='h2' color='white' textAlign='center'>
                    Submit An MRI Booking
                </Header>
                <Form inverted color='blue' onSubmit={this.handleSubmit}>
                    <Form.Field
                        fluid
                        control={Input}
                        name='reqCIO'
                        label='reqCIO'
                        value={this.state.reqCIO}
                        onChange={this.handleChange}
                    />
                    <DateInput
                        name="DOB"
                        value={this.state.DOB}
                        dateFormat="YYYY-MM-DD"
                        label="Date of Birth (YYYY-MM-DD)"
                        iconPosition="left"
                        onChange={this.handleSelectChange}
                    />
                    <Form.Group inline widths="equal">
                        <Form.Field
                            fluid
                            control={Input}
                            name='height'
                            label='Height'
                            value={this.state.height}
                            onChange={this.handleChange}
                        />
                        <Form.Dropdown
                            fluid
                            selection
                            name='inchcm'
                            label='Height Unit'
                            options={[
                                { key: 'CM', text: 'Centimeters', value: 'CM' },
                                { key: 'IN', text: 'Inches', value: 'IN' },
                            ]}
                            onChange={this.handleSelectChange}
                        />
                        <Form.Field
                            fluid
                            control={Input}
                            name='weight'
                            label='Weight'
                            value={this.state.weight}
                            onChange={this.handleChange}
                        />
                        <Form.Dropdown
                            fluid
                            selection
                            name='kglbs'
                            label='Weight Unit'
                            options={[
                                { key: 'KG', text: 'Kilograms', value: 'KG' },
                                { key: 'LBS', text: 'Pounds', value: 'LBS' },
                            ]}
                            onChange={this.handleSelectChange}
                        />
                    </Form.Group>
                    <Form.Dropdown
                        fluid
                        selection
                        name='radiologistPriority'
                        label='Radiologist Priority'
                        options={priorityOptions}
                        onChange={this.handleSelectChange}
                    />
                    <Form.Field
                        fluid
                        control={TextArea}
                        name='reasonForExam'
                        label='Reason for Exam'
                        value={this.state.reasonForExam}
                        placeholder='Please provide more details'
                        rows='6'
                        onChange={this.handleChange}
                    />
                    <Form.Field
                        fluid
                        control={Input}
                        name='examRequested'
                        label='Exam Requested'
                        value={this.state.examRequested}
                        onChange={this.handleChange}
                    />
                    <Form.Button fluid color='white' content='Submit'
                    disabled={!this.state.reqCIO || !this.state.DOB || !this.state.height || !this.state.inchcm
                        || !this.state.weight || !this.state.kglbs || !this.state.radiologistPriority
                        || !this.state.reasonForExam || !this.state.examRequested}>Submit</Form.Button>
                </Form>
            </Segment>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        bookingResults: state.booking.bookingResults,
        loading: state.booking.loading,
        error: state.booking.error
    }
};

export default connect(mapStateToProps, { sendMRIRequest })(BookingForm);