import React from 'react';
import {reduxForm} from 'redux-form';
// import MarkdownPage from 'react-router-proxy!trc-client-core/src/components/MarkdownPage';
import {submitManagementQualificationRequest} from 'trc-client-core/src/management/ManagementActions';

// import xhr from 'trc-client-core/src/utils/xhr';

import Button from 'bd-stampy/components/Button';
import Label from 'bd-stampy/components/Label';
import Input from 'bd-stampy/components/InputElement';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Loader from 'trc-client-core/src/components/Loader';

import FormError from 'trc-client-core/src/forms/FormError';
import BasicValidation from 'trc-client-core/src/forms/BasicValidation';

import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import ModalConfirm from 'trc-client-core/src/Modal/ModalConfirm';

var ManagementQualificationRequestForm = React.createClass({
    displayName: 'ManagementQualificationRequestForm',
    propTypes: {
        fields: React.PropTypes.object.isRequired,
        handleSubmit: React.PropTypes.func.isRequired
    },
    getInitialState() {
        return {
            success: false  
        };
    },
    onShowModal(data) {
        ModalManager.showModal(ModalConfirm, {
            title: 'Thank You.',
            message: 'Thank you for registering your interest, by clicking confim an email will be sent to Toyota Institute Australia. A representative will be in touch shortly.',
            yes: 'Submit',
            onYes: this.saveForm.bind(this, data),
            no: 'Cancel'
        });
    },
    saveForm(data) {
        return this.props.dispatch(submitManagementQualificationRequest(this.props.programCode, data)).then(() => {
            this.setState({
                success: true
            })
        });
    },
    render() {
        const {fields: {name, email}, submitting, handleSubmit} = this.props;
        if (submitting) {
            return <Loader/>
        }

        if (this.state.success) {
            return <div className="InfoBox InfoBox-success row">
                Thank you for registering your interest. A representative will be in touch shortly.
            </div>
        }

        return (
            <form>
                <Grid modifier="tight">
                    <Col>
                        <Label>Name</Label>
                        <Input type="text" {...name} />
                        <FormError {...name} />
                    </Col>
                    <Col>
                        <Label>Email</Label>
                        <Input type="email" {...email}/>
                        <FormError {...email} />
                    </Col>
                    <Col width="4">
                        <Label>{'\xa0'}</Label>
                        <Button onClick={handleSubmit(this.onShowModal)}>Register your interest</Button>
                    </Col>
                </Grid>
            </form>
        );
    }
});

export default reduxForm({
    form: 'managementQualificationRequest',
    fields: ['name', 'email'],
    validate: BasicValidation
})(ManagementQualificationRequestForm);