import React from 'react';
import {connect} from 'react-redux';
import {Form, actions} from 'react-redux-form';
import isEmpty from 'lodash/isEmpty';
import get from 'lodash/get';

import Layout        from '../../../../shared/Layout';
import BaseForm      from '../../../../shared/form/BaseForm';
import SubmitForm    from '../../../../shared/form/SubmitForm';
import Datefield     from '../../../../shared/form/Datefield';
import ErrorBox      from '../../../../shared/form/ErrorBox';

import StatefulError from '../../../../shared/form/StatefulError';

import formProps     from '../../../../shared/reduxModules/formPropsSelector';
import {uploadDocument, submitApplication} from '../../redux/modules/application'

import { minObjectLength } from '../../../../validators';

class DocumentsForm extends BaseForm {

    static propTypes = {
        action: React.PropTypes.string,
        csrf_token: React.PropTypes.string,
        form: React.PropTypes.object.isRequired,
        model: React.PropTypes.string.isRequired,
        supplierCode: React.PropTypes.string
    }

    state = {
        errors: {}
    }

    formFields = [
        {
            'label': 'Financial Statement',
            'id': 'financial',
            'description': 'Ideally this is financial accounts for 3 years. If you don’t have this, ask your accountant for a letter confirming proof of financial viability.',
            'expires': false
        },
        {
            'label': 'Professional Indemnity and Public Liability Insurance',
            'id': 'liability',
            'description': 'Your insurer can issue a certificate of currency.',
            'expires': true
        },
        {
            'label': 'Workers Compensation Insurance',
            'id': 'workers',
            'description': 'Your insurer can issue a certificate of currency.',
            'expires': true
        }
    ]

    onUpload(id, e) {
        e.preventDefault();
        const {model, onUpload, removeDocument, updateDocumentName, createDocument, submitApplication} = this.props;
        const file = this.state[id].file;

        this.setState({
            [id]: Object.assign({}, this.state[id], {'uploading': true, 'file': void 0}),
            errors: Object.assign({}, this.state.errors, {[id]: void 0})
        })

        removeDocument(model, id);
        createDocument(model, id);

        onUpload(id, file)
            .then((filename) => {
                this.setState({
                    [id]: Object.assign({}, this.state[id], {'uploading': false})
                });
                updateDocumentName(model, id, filename);
            })
            .then(submitApplication)
            .catch((error) => {
                this.setState({
                    [id]: void 0,
                    errors: {[id]: true}
                })
            });
    }

    onReset(id, e) {
        e.preventDefault();
        const {model, removeDocument, createDocument} = this.props;
        removeDocument(model, id);
        createDocument(model, id);
        this.setState({
            [id]: Object.assign({}, this.state[id], {'file': void 0})
        })
    }

    onChange(id, e) {
        e.preventDefault();
        this.setState({
            [id]: Object.assign({}, this.state[id], {'file': e.target.files[0]}),
            errors: {[id]: void 0}
        })
    }

    render() {
        const {action, csrf_token, sellerCode, model, form, documentsForm, onSubmit, pathname = '', buttonText} = this.props;
        let intro = 'As part of your assessment we’ll need the following documents.'
        if (sellerCode) {
            intro = 'It’s now been almost a year since you shared your insurance and financial documents with us. As such, we need more recent versions of the following documents. '
        }

        return (
            <Layout>
                <header>
                    <h1 tabIndex="-1">Upload your documents</h1>
                    <p>{intro}
                        Each should be no larger than 5MB and in <strong>PDF</strong>, <strong>PNG</strong> or <strong>JPEG </strong>
                        format.
                    </p>
                </header>
                <article role="main">
                    <ErrorBox focusOnMount={true} model={model}/>

                    <StatefulError
                        model={`${model}.documents`}
                        id="documents"
                        messages={{
                            documents: 'Please upload all documents.'
                        }}
                    />
                    <Form model={model}
                          action={action}
                          method="post"
                          id="yourinfo"
                          component={SubmitForm}
                          valid={form.valid}
                          onCustomSubmit={onSubmit}
                          validators={{
                            documents: (documents = {}) => minObjectLength(documents, 3) 
                          }}
                    >
                        {csrf_token && (
                            <input type="hidden" name="csrf_token" id="csrf_token" value={csrf_token}/>
                        )}

                        {this.formFields.map((field, i) => {
                            const key = field.id;
                            const fieldState = this.state[key] || {};
                            const doc = get(documentsForm, `documents.${key}`, {});
                            const expiry_date_field = 'expiry_date_' + key;
                            const errors = this.state.errors[key];
                            return (
                                <div key={key} className="callout">
                                    <label className="question-heading" htmlFor={key}>{field.label}</label>
                                    <p>{field.description}</p>

                                    <div>
                                        <div>
                                            {isEmpty(doc.filename) && (
                                                <p>
                                                    <input type="file" id={key} name={key} accept=".pdf,.jpg,.png" onChange={this.onChange.bind(this, key)}/>
                                                </p>
                                            )}
                                            {(field.expires && !isEmpty(doc.filename)) && <Datefield
                                                model={`${model}.documents.${key}.expiry`}
                                                name={expiry_date_field}
                                                id={expiry_date_field}
                                                htmlFor={expiry_date_field}
                                                label="Expiry date:"
                                                messages={{
                                                    required: 'Expiry date is required for this document.',
                                                }}
                                            />}
                                        </div>

                                        <div>
                                            {fieldState.uploading && 'Uploading...'}
                                            {errors && 'There was an error uploading the file'}
                                            {!isEmpty(doc.filename) && <p><a href={`${pathname.slice(1)}/${doc.filename}`} target="_blank"
                                                          rel="external">{doc.filename}</a></p>}
                                        </div>
                                    </div>
                                    <div className="actions">
                                        {fieldState.file &&
                                        <button type="submit" onClick={this.onUpload.bind(this, key)}>Upload</button>}
                                        {!isEmpty(doc) &&
                                        <button type="reset" onClick={this.onReset.bind(this, key)}>Remove</button>}
                                    </div>

                                </div>
                            )
                        })}

                        <input type="submit" value={buttonText} role="button"/>
                    </Form>
                </article>
            </Layout>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        supplierCode: state.application.supplierCode,
        ...formProps(state, 'documentsForm')
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onUpload: (id, data) => {
            return dispatch(uploadDocument(id, data));
        },
        removeDocument: (model, id) => {
            return dispatch(actions.omit(`${model}.documents`, id));
        },
        createDocument: (model, id) => {
            return dispatch(actions.change(`${model}.documents.${id}`, {}));
        },
        updateDocumentName: (model, id, filename) => {
            return dispatch(actions.change(`${model}.documents.${id}.filename`, filename));
        },
        submitApplication: () => {
            return dispatch(submitApplication());
        }
    }
}

export {
    mapStateToProps,
    DocumentsForm as Form
}

export default connect(mapStateToProps, mapDispatchToProps)(DocumentsForm);

@@ -3464,21 +3464,16 @@
 it, 
-pathname = ''
+location
 , bu
@@ -7490,16 +7490,25 @@
 ref=%7B%60$%7B
+location.
 pathname

Fix document view URL