import React, {Component} from 'react';
import {Row, Col, Container,  Popover, PopoverBody, PopoverHeader} from 'reactstrap';
import {API_SERVER} from '../../../../config';
import FileDownloader from '../../../../helpers/FileDownloader';
import {orderTexts} from '../../../../constants/ordersConstants';

const fileHandler = new FileDownloader();

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

        this.toggle = this.toggle.bind(this);
        this.state = {
          popoverOpen: false
        };
    }

    toggle() {
        this.setState({
          popoverOpen: !this.state.popoverOpen
        });
    }

    render() {
        const {orderPackage, currency, onViewChange} = this.props;
        const shouldShowPriceInfo = orderPackage.recurringPrice > 0 || orderPackage.servicePrice > 0;

        return (
            <Container fluid={true} id="package-info" className="order-package-info">
                <Row>
                    <Col xl="3">
                        <div className="subtitle">
                            <h6>
                                {orderTexts.labels.PACKAGE_PRICE}: {' '}
                                { shouldShowPriceInfo &&
                                    <i className="price-info-btn fa fa-info-circle"
                                        id={'price-info-' + orderPackage.id}
                                        onClick={this.toggle}></i>
                                }
                            </h6>

                        </div>
                        <div>
                            {orderTexts.labels.TOTAL_DELVIERY_PRICE}: {' '}
                            {(orderPackage.quantity * orderPackage.price).toLocaleString() + ' ' + currency}
                        </div>
                        {
                            shouldShowPriceInfo &&
                            <div>
                                {orderTexts.labels.TOTAL_RECURRENT_PRICE}:{' '}
                                {(orderPackage.quantity * (orderPackage.recurringPrice + orderPackage.servicePrice)).toLocaleString()} {currency}
                            </div>
                        }

                        { shouldShowPriceInfo &&
                            <Popover placement="bottom"
                                        isOpen={this.state.popoverOpen}
                                        target={'price-info-' + orderPackage.id}
                                        container={'price-info-' + orderPackage.id}
                                        className="price-info-popover"
                                        toggle={this.toggle}>
                               <PopoverHeader>{orderPackage.paymentType}</PopoverHeader>
                               <PopoverBody>
                                   <div>
                                       { orderPackage.recurringPrice > 0 &&
                                           <div className="package-price-recurrent">
                                               <span className="price-info-title">{orderTexts.labels.RECURRENT_PRICE}: </span>
                                               {(orderPackage.quantity * orderPackage.recurringPrice).toLocaleString()} {currency} / {orderPackage.periodUnit}
                                               {
                                                   orderPackage.packagePayPeriod > 0 &&
                                                   <span>
                                                       for {orderPackage.payPeriod} {orderPackage.periodUnit}
                                                   </span>
                                               }
                                           </div>
                                       }

                                       { orderPackage.servicePrice > 0 &&
                                           <div className="services-price-recurrent">
                                               <span className="price-info-title">{orderTexts.labels.SERVICES_PRICE}: </span>
                                               {(orderPackage.quantity * orderPackage.servicePrice).toLocaleString()} {currency} / {orderPackage.periodUnit}
                                               {
                                                   orderPackage.servicesContractPeriod > 0 &&
                                                   <span>
                                                       for {orderPackage.servicesContractPeriod} {orderPackage.periodUnit}
                                                   </span>
                                               }
                                                <span> {orderTexts.labels.EXTEND} {orderPackage.periodUnit} (Max {orderPackage.maxContractPeriod} {orderPackage.periodUnit})</span>
                                           </div>
                                       }
                                   </div>
                               </PopoverBody>
                            </Popover>
                        }
                    </Col>
                    {
                        orderPackage.options && orderPackage.options.length > 0 &&
                        <Col xl="3">
                            <div className="subtitle"><h6>{orderTexts.labels.OPTIONS}:</h6></div>
                            {
                                orderPackage.options.map((option, index) => <div key={'option-'+index}>
                                    {option.groupName}: {option.packageName}
                                </div>)
                            }
                        </Col>
                    }
                    {
                        orderPackage.additionalPackages && orderPackage.additionalPackages.length > 0 &&
                        <Col xl="3">
                            <div className="subtitle"><h6>{orderTexts.labels.ADDITIONAL_PACKAGES}:</h6></div>
                            {
                                orderPackage.additionalPackages.map((additional, index) => <div key={'additional-'+index}>
                                    {additional.packageName}
                                </div>)
                            }
                        </Col>
                    }
                </Row>
            </Container>
        );
    }
}

export default PackageInfo;
