import React, {Component} from 'react';
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.state = {};
    }

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

    downloadDocument(orderId, itemId, document){
        const fileUrl = `${API_SERVER}/wp-json/wiaas/documents/order/${orderId}/${document.type}?item_id=${itemId}&document_key=${document.key}`;
        fileHandler.download(fileUrl, document.name);
    }

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

        return (
             <div>
                 {
                     documentsGroup.documents &&
                     documentsGroup.documents.length > 0 &&
                     <WiaasBox mainTitle={documentsGroup.name}>
                         {
                             documentsGroup.documents.map(document => <a id={'document-' + document.key}  key={'order-document-' + document.key}>
                             <div onClick={() => {this.downloadDocument(orderId, documentsGroup.orderItemId, document)}} className="document-link-big">
                                     <i className={'fa fa-4x fa-' + this.getDocumentIcon(document.extension)} aria-hidden="true"></i>
                                     <div>
                                         {document.name}
                                     </div>
                             </div></a>)
                         }
                     </WiaasBox>
                 }
            </div>)
    }
}

export default OrderDocumentsGroup;