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.name + '.' + document.extension;

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

    downloadDocument(document, packageID){
        const fileUrl = `${API_SERVER}/wp-json/wiaas/download-package-file?document_id=${document.id}&package_id=${packageID}`
        const fileName = document.name + '.' + document.extension;
        fileHandler.download(fileUrl, fileName);
    }

    render() {
        const {documents, packageName, packageID} = this.props;

        return (
             <div>
                 {
                     documents &&
                     documents.length > 0 &&
                     <WiaasBox mainTitle={packageName}>
                         {
                             documents.map(document => <a id={'document-' + document.id}  key={'order-document-' + document.id}>
                             <div onClick={() => {this.downloadDocument(document, packageID)}} 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.id]}
                                             target={'document-' + document.id}
                                             toggle={()=>this.toggle(document.id)}>
                                             {document.name} ({document.extension})
                                         </Tooltip>
                                     </div>
                             </div></a>)
                         }
                     </WiaasBox>
                 }
            </div>)
    }
}

export default OrderDocumentsGroup;