import React, {Component} from 'react';
import {connect} from 'react-redux';
import moment from 'moment';
import {Container, Row, Col} from 'reactstrap';
import TermsContainer from '../../terms/TermsContainer.jsx';
import {orderTexts} from '../../../constants/ordersConstants';

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

        this.state = {
            acceptedDate: {},
            proposedDate: {},
            isPreliminaryInstallationDate: true
        };
    }

    componentDidMount() {
        this.setInstallationData(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.setInstallationData(nextProps);
    }

    setInstallationData(props) {
        const acceptedDate = {};
        const proposedDate = {};
        const idOrder = props.orderDetails.id;
        const {isInstallationInPackage} = props.installationData;
        const {confirmationDates, areAllShippingDatesConfirmed} = props;
        const isPreliminaryInstallationDate = areAllShippingDatesConfirmed && idOrder in areAllShippingDatesConfirmed ? !areAllShippingDatesConfirmed[idOrder] : true;
        const isInstallationInOrder = Object.keys(isInstallationInPackage).some(idOrderPackage => {return isInstallationInPackage[idOrderPackage] === true;});

        props.orderDetails.packages.forEach(orderPackage => {
            const idOrderPackagePair = idOrder + '-' + orderPackage.idPackage;

            if(confirmationDates && confirmationDates[idOrderPackagePair]) {
                const packageDates = confirmationDates[idOrderPackagePair];
                const accepted = Object.keys(packageDates).find(installDate => {return packageDates[installDate].lastStatus === 'accepted'});
                acceptedDate[idOrderPackagePair] = accepted ? moment(accepted).format('Do MMM, YYYY') : '';
                const proposed = Object.keys(packageDates).find(installDate => {return packageDates[installDate].lastStatus === 'proposed'});
                proposedDate[idOrderPackagePair] = proposed ? moment(proposed).format('Do MMM, YYYY') : '';
            }
        });

        this.setState({acceptedDate, proposedDate, isPreliminaryInstallationDate, isInstallationInOrder});
    }

    render() {
        const {totalPrice, installationData} = this.props;
        const {acceptedDate, proposedDate, isPreliminaryInstallationDate, isInstallationInOrder} = this.state;
        const orderPackages = installationData.packages;
        const isInstallationInPackage = installationData.isInstallationInPackage;
        const orderInfo = this.props.orderInfo;

        return (
            <Container fluid={true} id="order-info-description">
                <Row>
                    <Col xl="2">
                        <div className="subtitle"><h6>{orderTexts.labels.ORDER_DATE}:</h6></div>
                        <span>{orderInfo.dateCreated}</span>
                        <div className="subtitle"><h6>{orderTexts.labels.SOLD_BY}:</h6></div>
                        <span>{orderInfo.commercialLead.name}</span>

                    </Col>
                    <Col xl="2">
                        <div className="subtitle"><h6>{orderTexts.labels.BILLING_FIRST_NAME}:</h6></div>
                        <span>{orderInfo.billing.firstName || '-'}</span>
                        <div className="subtitle"><h6>{orderTexts.labels.BILLING_LAST_NAME}:</h6></div>
                        <span>{orderInfo.billing.lastName || '-'}</span>
                        <div className="subtitle"><h6>{orderTexts.labels.BILLING_MAIL}:</h6></div>
                        <span>{orderInfo.billing.email || '-'}</span>
                        <div className="subtitle"><h6>{orderTexts.labels.BILLING_ADDRESS}:</h6></div>
                        <span>{orderInfo.billing.address || '-'}</span>
                    </Col>
                    <Col xl="2">
                        <div>
                            <div className="subtitle"><h6>{orderTexts.labels.REFERENCE}:</h6></div>
                            <span>{orderInfo.reference || '-'}</span>
                        </div>
                        <div>
                            <div className="subtitle"><h6>{orderTexts.labels.BID}:</h6></div>
                            <span>{orderInfo.tender || '-'}</span>
                        </div>
                    </Col>
                    { isInstallationInOrder &&
                        <Col xl="3">
                            <div>
                                <div className="subtitle">
                                    { isPreliminaryInstallationDate
                                        ? <h6>{orderTexts.labels.PRELIMINARY_INSTALLATION_DATE_LABEL}:</h6>
                                        : <h6>{orderTexts.labels.INSTALLATION_DATE}:</h6>
                                    }
                                </div>
                                { orderPackages &&
                                    orderPackages.map(orderPackage =>
                                        <div key={'package-install-date-' + orderPackage.idOrderPackagePair}>
                                            { isInstallationInPackage[orderPackage.idOrderPackagePair] &&
                                                <div>
                                                    { orderPackages.length > 1 &&
                                                        <span>{orderPackage.packageName}: </span>
                                                    }
                                                    <span className="installation-date-per-package">
                                                    { acceptedDate && acceptedDate[orderPackage.idOrderPackagePair]
                                                        ? acceptedDate[orderPackage.idOrderPackagePair]
                                                        : proposedDate && proposedDate[orderPackage.idOrderPackagePair]
                                                            ? proposedDate[orderPackage.idOrderPackagePair]
                                                            : orderTexts.labels.NOT_SET
                                                    }

                                                    </span>
                                                </div>
                                            }
                                        </div>
                                    )
                                }
                            </div>
                        </Col>
                    }

                    <Col xl="2">
                            <div className="subtitle"><h6>{orderTexts.labels.TOTAL_DELVIERY_PRICE}:</h6></div>
                            <span>{totalPrice.fixedPrice.toLocaleString()} {totalPrice.currency}</span>

                            {
                                totalPrice.recurrentPrice > 0 &&
                                <div>
                                    <div className="subtitle"><h6>{orderTexts.labels.TOTAL_RECURRENT_PRICE}:</h6></div>
                                    <span>
                                        {totalPrice.recurrentPrice.toLocaleString() + ' ' + totalPrice.currency}
                                    </span>
                                </div>
                            }

                    </Col>
                    <Col xl="2">
                        <div>
                            <div className="subtitle"><h6>{orderTexts.labels.PROJECT}:</h6></div>
                            <span>{orderInfo.projectName || '-'}</span>
                        </div>
                        
                        <div className="terms-link">
                            <i className="fa fa-link"></i>
                                <span className="terms-label">
                                    <TermsContainer idTerms={orderInfo.idTerms}/>
                                </span>
                        </div>
                    </Col>
                </Row>
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    orderInfo: state.processReducer.orderInfo,
    confirmationDates: state.processReducer.confirmationDates,
    areAllShippingDatesConfirmed: state.processReducer.areAllShippingDatesConfirmed
});
export default connect(mapStateToProps)(OrderInfo);