import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Col} from 'reactstrap';
import {uploadOrderDocument, badFile} from '../../../actions/cart/cartActions';
import Dropzone from 'react-dropzone';
import {API_SERVER} from '../../../config';
import FileDownloader from '../../../helpers/FileDownloader';
import {cartTexts} from '../../../constants/cartConstants';
import {getDocumentIcon} from '../../../helpers/DocumentHelper';
import classnames from 'classnames';

const fileHandler = new FileDownloader();
const documentTypes = {
    'order_questionaire' : 'Customer Questionnaire',
    'order_agreement' : 'Customer Agreement'
};

class CartUploadDocument extends Component {
    constructor(props) {
        super(props);

        this.uploadFile = this.uploadFile.bind(this);
    }

    uploadFile(packageCartKey, idDocumentType,acceptedFiles, rejectedFiles, packages){
        const self = this;

        acceptedFiles.forEach(file => {
            self.props.dispatch(uploadOrderDocument(packageCartKey, idDocumentType, file, packages));
        });

        if(rejectedFiles && rejectedFiles.length) {
            this.props.dispatch(badFile());
        }
    }

    downloadDocument(document){
        fileHandler.download(
            `${API_SERVER}/wp-json/wiaas/cart/items/${this.props.cartItem.key}/documents/${this.props.idDocumentType}?document_key=${document.key}`,
            `${document.name}.${document.extension}`);
    }

    downloadTemplate(document) {
        fileHandler.download(
            `${API_SERVER}/wp-json/wiaas/documents?document_id=${document.id}`,
            `${document.name}.${document.extension}`);
    }

    render() {
        const {idDocumentType, cartItem, uploadedDocument, templateDocument, packages} = this.props;

        return (<Col lg="6">
                {
                    templateDocument &&
                    <div>
                        <div className="cart-template">
                            <p className="cart-subtitle">{documentTypes[idDocumentType]} {cartTexts.labels.TEMPLATE}:</p>
                            <p className="document-link" onClick={() => {this.downloadTemplate(templateDocument)}}>
                                <i className={`fa fa-${getDocumentIcon(templateDocument.extension)}`} aria-hidden="true"></i> {templateDocument.name}
                            </p>
                        </div>

                        <Dropzone className={classnames('upload-file-drop-zone', { 'pending-upload': !uploadedDocument })}
                            accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods, .zip"
                            onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(cartItem.key, idDocumentType, acceptedFiles, rejectedFiles, packages)}}>
                            {
                            uploadedDocument
                            ? (
                                <div>
                                    <h1 className="drop-zone-icon">
                                        <i className="fa fa-upload"></i>
                                    </h1>
                                    <p className="drop-zone-text">
                                        Drag and drop or click to replace <strong>{uploadedDocument.name}.{uploadedDocument.extension}</strong>
                                    </p>
                                    <p className="drop-zone-text">To upload multiple files, please pack the files to one zip-file and upload the zip-file</p>
                                </div>
                                )
                            :   (
                                <div>
                                    <h1 className="drop-zone-icon pending-upload">
                                        <i className="fa fa-upload"></i>
                                    </h1>
                                    <p className="drop-zone-text">
                                        Drag and drop or click to upload file
                                    </p>
                                    <p className="drop-zone-text">To upload multiple files, please pack the files to one zip-file and upload the zip-file</p>
                                </div>
                                )
                            }
                        </Dropzone>
                        {
                            uploadedDocument &&
                            <div>
                                <span className="document-link" onClick={() => {this.downloadDocument(uploadedDocument)}}>
                                    <strong>
                                         <i className={`fa fa-${getDocumentIcon(uploadedDocument.extension)}`} aria-hidden="true"></i> {uploadedDocument.name}
                                    </strong>
                                </span>
                            </div>
                        }
                    </div>
                }

            </Col>);
    }
}

export default connect()(CartUploadDocument);