import React, {Component} from 'react';
import {Tooltip} from 'reactstrap';
import WiaasBox from '../../../mainComponents/box/WiaasBox.jsx';
import {API_SERVER} from '../../../config';
import FileDownloader from '../../../helpers/FileDownloader';

const fileHandler = new FileDownloader();

const iconTypes = {
    doc: 'file-word-o',
    docx: 'file-word-o',
    odt: 'file-word-o',
    ods: 'file-excel-o',
    pdf: 'file-pdf-o',
    png: 'file-image-o',
    jpg: 'file-image-o',
    xls: 'file-excel-o',
    xlsx: 'file-excel-o',
    ppt: 'file-powerpoint-o',
    pptx: 'file-powerpoint-o'
}

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

        this.toggle = this.toggle.bind(this);
        this.state = {};
    }

      toggle(idDocument) {
          const obj = {}
          obj[idDocument] = !this.state[idDocument];

          this.setState(obj);
      }

    getDocumentIcon(documentType) {
        return iconTypes[documentType] || 'file';
    }

    getDocumentText(document) {
        const name = document.documentName + '.' + document.extension;

        return name.length > 9 ? name.substring(0, 10) + '...' : name;
    }

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

    render() {
        const {documentsGroup} = this.props;

        return (
             <div>
                 {
                     documentsGroup.documents &&
                     documentsGroup.documents.length > 0 &&
                     <WiaasBox mainTitle={documentsGroup.packageName}>
                         {
                             documentsGroup.documents.map(document => <a id={'document-' + document.idDocument}  key={'order-document-' + document.idDocument}>
                             <div onClick={() => {this.downloadDocument(document)}} className="document-link-big">
                                     <i className={'fa fa-4x fa-' + this.getDocumentIcon(document.extension)} aria-hidden="true"></i>
                                     <div>
                                         {this.getDocumentText(document)}
                                         <Tooltip placement="bottom"
                                             delay={{ show: 0, hide: 0}}
                                             container="order-documents"
                                             isOpen={this.state[document.idDocument]}
                                             target={'document-' + document.idDocument}
                                             toggle={()=>this.toggle(document.idDocument)}>
                                             {document.documentName} ({document.extension})
                                         </Tooltip>
                                     </div>
                             </div></a>)
                         }
                     </WiaasBox>
                 }
            </div>)
    }
}

export default OrderDocumentsGroup;