import React, {Component} from 'react';
import {Col} from 'reactstrap';
import WiaasBox from '../../../mainComponents/box/WiaasBox.jsx';
import {WiaasTable, WiaasTableHeader, WiaasTableBody, WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasTable.jsx';
import {orderTexts} from '../../../constants/ordersConstants';
import '../style/Orders.css';

class OrderPackage extends Component {
    calculateRecuringPrice(packageDetails) {
        return packageDetails.units * (parseFloat(packageDetails.packageRecuringPrice) + parseFloat(packageDetails.packageServicePrice));
    }

    calculateQuantityPrice(quantity, price, recurringPrice = 0) {
        return quantity * parseFloat(price + recurringPrice);
    }

    getHeadersByType(type) {
        if(type === 'active') {
            return ['Package', 'Price', 'Services and support', 'Delivery active step'];
        }

        return ['Package', 'Price', 'Services and support', 'End of Life'];
    }

    render() {
        const {order, type} = this.props;

        return (
            <WiaasTableRow className={"order-border-" + order.status}>
                <Col lg="3" sm="12" xs="12">
                    <WiaasBox mainTitle="Order Details">
                        <div className="order-details-container">
                            <WiaasTableRow id={'delivery-address-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{orderTexts.labels.DELIVERY_ADDRESS}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.deliveryAddress}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'phone-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{orderTexts.labels.PHONE_NUMBER}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.phone}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'mail-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{orderTexts.labels.MAIL}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.mail}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'commercial-lead-phone-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{order.clName} {orderTexts.labels.PHONE_NUMBER}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.commercialLeadPhone}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'mail-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{order.clName} {orderTexts.labels.MAIL}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.commercialLeadMail}</Col>
                            </WiaasTableRow>
                        </div>
                    </WiaasBox>
                </Col>
                <Col lg="9" sm="12" xs="12">
                    <WiaasBox mainTitle="Items">
                        <WiaasTable>
                            <WiaasTableHeader headers={this.getHeadersByType(type)}/>
                            <WiaasTableBody>
                                {order.packages.map((orderPackage, index) =>
                                    <WiaasTableRow className="order-central-row"  key={orderPackage.idOrder + '-' + orderPackage.idPackage}>
                                       <WiaasTableCol header="Package" className="package-info-col">
                                           <div className="package-name">{orderPackage.units} x {orderPackage.packageName}</div>
                                        </WiaasTableCol>
                                        <WiaasTableCol header="Price">
                                            {this.calculateQuantityPrice(orderPackage.units, orderPackage.packageFixedPrice).toLocaleString()} {orderPackage.packageCurrency && orderPackage.packageCurrency.currency} {' '}
                                            ({orderPackage.paymentType})
                                        </WiaasTableCol>
                                        <WiaasTableCol header="Services and support">
                                           {this.calculateQuantityPrice(orderPackage.units, orderPackage.packageServicePrice, orderPackage.packageRecuringPrice).toLocaleString() + ' / ' + orderPackage.periodUnit + ' '}
                                           {orderTexts.labels.EXTEND} {orderPackage.periodUnit} (Max {orderPackage.maxContractPeriod})
                                        </WiaasTableCol>
                                        <WiaasTableCol>
                                            {
                                                type === 'active'
                                                ? orderPackage.shortDesc ? orderPackage.shortDesc : '-'
                                                : orderPackage.endOfLife ? orderPackage.endOfLife : '-'
                                            }
                                        </WiaasTableCol>
                                   </WiaasTableRow>
                               )}
                            </WiaasTableBody>
                        </WiaasTable>
                   </WiaasBox>
               </Col>
           </WiaasTableRow>
        );
    }
}

export default OrderPackage;