import React, {Component} from 'react';
import {connect} from 'react-redux';
import {coMarketTexts} from '../../../constants/coMarketConstants';

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

        this.getFinalPrice = this.getFinalPrice.bind(this);
        this.filterByAgreement = this.filterByAgreement.bind(this);
    }

    filterByAgreement(price) {
        return price.idPaymentType === this.props.selectedAgreement.idPaymentType;
    }

    getExtra(selected, priceType) {
        const extraPriceObj = selected.prices.find(this.filterByAgreement);
        const extraPrice = extraPriceObj ? extraPriceObj[priceType] : 0;

        return extraPrice;
    }

    getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, priceType) {
        let price = selectedAgreement ? selectedAgreement[priceType] : 0;

        if(selectedAgreement && selectedOptions) {
            Object.keys(selectedOptions).forEach((idGroup) => {
                price += this.getExtra(selectedOptions[idGroup], priceType);
            });
        }
        if(selectedAgreement && selectedAdditionals) {
            selectedAdditionals.forEach((additional) => {
                price += this.getExtra(additional, priceType);
            });
        }

        return price;
    }

    render() {
        const {currency, selectedAgreement, selectedOptions, selectedAdditionals} = this.props;

        return (
                <div className="selection-price">
                    {
                        selectedAgreement &&
                        <table className="price-table main-price">
                            <thead>
                                <tr>
                                    <th>{coMarketTexts.labels.ON_DELIVERY}</th>
                                    <th>{coMarketTexts.labels.MONTHLY}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        {this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'fixedExtra').toLocaleString()} {currency}
                                    </td>
                                    <td>
                                        {(this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra')
                                        + this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra')).toLocaleString()}
                                    {' '}{currency}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    }
                </div>
        );
    }
}

const mapStateToProps = (state) => ({
    selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
    selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions,
    selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals
});

export default connect(mapStateToProps)(PackagePrice);