import React, {Component} from 'react';
import {connect} from 'react-redux';
import { Col } from 'reactstrap';
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;
    }

    getFormatedFixedPrice(selectedAgreement, selectedOptions, selectedAdditionals) {
        if (!selectedAgreement) {
            return '-';
        }

        const finalPrice = this.getFinalPrice(
            selectedAgreement,
            selectedOptions,
            selectedAdditionals,
            'fixedExtra');
        return `${finalPrice.toLocaleString()} ${this.props.currency}`
    }

    getFormatedRecurrentPrice(selectedAgreement, selectedOptions, selectedAdditionals) {
        if (!selectedAgreement) {
            return '-';
        }

        const recurrentExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra');
        const servicesExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra');

        return `${(recurrentExtra + servicesExtra).toLocaleString()} ${this.props.currency}`
    }

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

        return (
                <div className="shop-package-price d-flex flex-column">
                    <div className="d-flex flex-grow-1 no-wrap">
                        <Col className="col-3 offset-6">
                            <h6>{coMarketTexts.labels.ON_DELIVERY}:</h6>
                        </Col>
                        <Col className="col-3">
                            <h6>{coMarketTexts.labels.MONTHLY}:</h6>
                        </Col>
                    </div>
                    <div className="d-flex flex-grow-1 no-wrap">
                        <Col className="col-3 offset-6">
                            <h4>
                                {this.getFormatedFixedPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
                            </h4>
                        </Col>
                        <Col className="col-3">
                            <h4>
                                {this.getFormatedRecurrentPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
                            </h4>
                        </Col>
                    </div>
                </div>
        );
    }
}

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

export default connect(mapStateToProps)(PackagePrice);