import React, {Component} from 'react';
import {connect} from 'react-redux';
import Dropzone from 'react-dropzone';
import {Row, Col} from 'reactstrap';
import {reUploadOrderDocument, badFile} from '../../../../actions/orders/processActions';
import {API_SERVER} from '../../../../config';
import FileDownloader from '../../../../helpers/FileDownloader';
import {orderTexts} from '../../../../constants/ordersConstants';

const fileHandler = new FileDownloader();

class ValidateQuestionnaireItem extends Component {
    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);
    }

    uploadFile(idPackage, idOrder, idDocument,acceptedFiles, rejectedFiles) {
        if(acceptedFiles && acceptedFiles.length){
            const file = acceptedFiles[0];
            this.props.dispatch(reUploadOrderDocument(idPackage, idOrder, idDocument, file));
        }

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

    render() {
        const {customerDocuments, validationComments, orderPackage} = this.props;

        return (
            <div id="validate-questionnaire" className="validate-questionnaire">
                {
                    customerDocuments &&
                    <div>
                        {orderPackage.packageName}
                        {
                            customerDocuments.map(document => <div key={'package-document-' + document.idDocument}>
                                {
                                    document.validation === 'invalid'
                                    ? <div className="package-document">
                                        <Row>
                                            <Col xl="7" lg="8">
                                                <div>
                                                    <span className="document-link"
                                                        onClick={() => {this.downloadDocument(document)}}>
                                                        <i className={'fa fa-file'}></i> {document.documentName} ({document.extension}) {' '}
                                                    </span>
                                                    <span className="document-status">
                                                        {document.validation.replace(/-/g,' ')} <div className={'status-icon ' + document.validation}></div>
                                                    </span>
                                                </div>
                                                {
                                                    (validationComments && validationComments.length > 0) &&
                                                    <div>
                                                        {validationComments.map((comment, key) => <div key={'step-comment-' + document.idDocument + '-' + key} className="step-comment">
                                                            <div>{comment.user} - {comment.addDate}</div>
                                                            <div>{comment.comment}</div>
                                                        </div>)}
                                                    </div>
                                                }
                                            </Col>
                                            <Col xl="5">
                                                <Dropzone className="upload-file-drop-zone"
                                                        multiple={false}
                                                        accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods"
                                                        activeClassName="upload-file-accept"
                                                        onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(document.idPackage, document.idOrder, document.idDocument, acceptedFiles, rejectedFiles)}}>
                                                     <h5 className="drop-zone-text">{orderTexts.labels.SELECT_OR_DROP}</h5>
                                                </Dropzone>
                                            </Col>
                                        </Row>
                                    </div>
                                    : <div className="package-document">
                                        <Row>
                                            <Col>
                                                <span className="document-link"
                                                    onClick={() => {this.downloadDocument(document)}}>
                                                    <i className={'fa fa-file'}></i> {document.documentName} ({document.extension}) {' '}
                                                </span>
                                                <span className="document-status">
                                                    {document.validation.replace(/-/g,' ')} <div className={'status-icon ' + document.validation}></div>
                                                </span>
                                            </Col>
                                        </Row>
                                    </div>
                                }
                            </div>)
                        }
                    </div>
                }
            </div>
        );
    }
}

export default connect()(ValidateQuestionnaireItem);