import React, {Component} from 'react';
import {connect} from 'react-redux';
import Dropzone from 'react-dropzone';
import {Row, Col} from 'reactstrap';
import {uploadCustomerQuestionnaire, badFile} from '../../../../actions/orders/customerQuestionnairesActions';
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(action,acceptedFiles, rejectedFiles) {
        if(acceptedFiles && acceptedFiles.length){
            const file = acceptedFiles[0];
            this.props.dispatch(uploadCustomerQuestionnaire(action.order_id, action.action_id, file));
        }

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

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

        const customerDocuments = [ action.document ];

        return (
            <div id="validate-questionnaire" className="validate-questionnaire">
                {
                    customerDocuments &&
                    <div>
                        {orderPackage.name}
                        {
                            customerDocuments.map(document => <div key={'package-document-' + document.key}>
                                {
                                    action.status === 'invalid'
                                    ? <div className="package-document">
                                        <Row>
                                            <Col xl="7" lg="8">
                                                <div>

                                                    <span className="document-link">
                                                       <i className={'fa fa-file'}></i> <a download href={document.url}> {document.name} </a>
                                                    </span>
                                                    <br />
                                                    <span className="document-status">
                                                     {action.status.replace(/-/g,' ')} <div className={'status-icon ' + action.status}></div>
                                                    </span>
                                                </div>
                                                {
                                                    (action.comments && action.comments.length > 0) &&
                                                    <div>
                                                        {action.comments.map((comment, key) => <div key={'step-comment-' + document.idDocument + '-' + key} className="step-comment">
                                                            <div>{comment}</div>
                                                        </div>)}
                                                    </div>
                                                }
                                            </Col>
                                            <Col xl="5">
                                                <Dropzone className="upload-file-drop-zone"
                                                        multiple={false}
                                                        accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods, .zip"
                                                        activeClassName="upload-file-accept"
                                                        onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(action, 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">
                                                   <i className={'fa fa-file'}></i> <a download href={document.url}> {document.name} </a>
                                                </span>
                                                <br />
                                                <span className="document-status">
                                                    {action.status.replace(/-/g,' ')} <div className={'status-icon ' + action.status}></div>
                                                </span>
                                            </Col>
                                        </Row>
                                    </div>
                                }
                            </div>)
                        }
                    </div>
                }
            </div>
        );
    }
}

export default connect()(ValidateQuestionnaireItem);