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';

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

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

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

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

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

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

    downloadDocument(document){
        const fileUrl = `${API_SERVER}/utils/api/downloadFile?idDocument=${document.idDocument}&fileName=${document.documentName}.${document.extension}`
        const fileName = document.documentName + '.' + document.extension;
        fileHandler.download(fileUrl, fileName);
    }

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

        return (<Col lg="6">
                {
                    templateDocument &&
                    <div>
                        <Dropzone className="upload-file-drop-zone"
                            accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods"
                            onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(cartItem.idPackage, idDocumentType, acceptedFiles, rejectedFiles, packages)}}>
                            {
                            uploadedDocument
                            ? <h6 className="drop-zone-text uploaded">{cartTexts.labels.FILE_UPLOADED_TEXT} {documentTypes[idDocumentType]} {cartTexts.labels.FILE}</h6>
                            : <h6 className="drop-zone-text">{cartTexts.labels.NO_FILE_UPLOAD_TEXT_1} {documentTypes[idDocumentType]} {cartTexts.labels.NO_FILE_UPLOAD_TEXT_2}</h6>
                            }
                        </Dropzone>
                        {
                            uploadedDocument &&
                            <div>
                                <div className="cart-subtitle">{cartTexts.labels.UPLOADED}:</div>
                                    <div className="document-link" onClick={() => {this.downloadDocument(uploadedDocument)}}>
                                        <i className="fa fa-file" aria-hidden="true"></i>
                                        {' ' + uploadedDocument.documentName + ' (' + uploadedDocument.extension + ')'}
                                    </div>
                            </div>
                        }
                        <div className="cart-subtitle">{cartTexts.labels.TEMPLATES}:</div>
                        <div className="document-link" onClick={() => {this.downloadDocument(templateDocument)}}>
                            <i className="fa fa-file" aria-hidden="true"></i>
                            {' ' + templateDocument.documentName + ' (' + templateDocument.extension + ')'}
                        </div>
                    </div>
                }

            </Col>);
    }
}

export default connect()(CartUploadDocument);