import React, {Component} from 'react';
import {Col} from 'reactstrap';
import {API_SERVER} from '../../../config';
import FileDownloader from '../../../helpers/FileDownloader';
import {coMarketTexts} from '../../../constants/coMarketConstants';

const fileHandler = new FileDownloader();

class PackageInfo extends Component {
    downloadDocument(document){
        fileHandler.download(
            `${API_SERVER}/wp-json/wiaas/documents?document_id=${document.id}`,
            `${document.name}.${document.extension}`);
    }

    render() {
        const { name, reference, shortDescription, country, countryCode, documents } = this.props;

        return (
            <div id="shop-package-general-info" className="shop-package-general-info">
                <span>
                    <Col lg="12"
                         className="shop-package-title"><h4>{name}</h4></Col>
                    <Col lg="12"
                         className="shop-package-reference"><h6>{reference}</h6></Col>
                    <Col lg="12"
                         dangerouslySetInnerHTML={{__html: shortDescription}}
                         className="shop-package-full-description"></Col>
                    <Col lg="12"
                         className="shop-package-details-country">
                            <div className="shop-package-label">{coMarketTexts.labels.AVAILABLE_IN}:</div>
                            <div className="shop-package-text">
                                {country} <span className={'flag-icon flag-icon-' + countryCode}></span>
                            </div>
                    </Col>
                </span>
                {
                        documents && documents.length > 0 &&
                        <Col lg="12"
                            className="shop-package-details-documents d-flex flex-column">
                                <div className="shop-package-label">{coMarketTexts.labels.DOCUMENTS}:</div>
                                {
                                    documents.map((document) =>
                                        <span key={document.id} className="document-link"
                                          onClick={() => {this.downloadDocument(document)}}>
                                            <i className={`fa fa-${document.icon}`} aria-hidden="true"></i> {document.name}
                                        </span>
                                    )
                                }
                        </Col>
                }
            </div>
        );
    }
}

export default PackageInfo;
