import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Label, Input, Col} from 'reactstrap';
import {selectAgreement} from '../../../actions/coMarket/coMarketPackageDetailsActions';
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
import {coMarketTexts} from '../../../constants/coMarketConstants';

const priceHelper = new PriceHelper();

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

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

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

    handleOptionChange() {
        this.props.dispatch(selectAgreement(this.props.price));
    }

    getClass(selectedAgreement, price) {
        return selectedAgreement.idPaymentType === price.idPaymentType ?
            'shop-package-option-selected' :
            '';
    }

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

        return (
            <div className={`shop-package-option d-flex  ${this.getClass(selectedAgreement, price)}`}>
                <Label check className="d-flex flex-grow-1 flex-column">
                    <div className="d-flex">
                        <Col className="d-flex align-items-center col-6">
                            <Input type="radio"
                                   name="price-type"
                                   onChange={this.handleOptionChange}
                                   checked={selectedAgreement.idPaymentType === price.idPaymentType}
                                   value={price.idPaymentType}
                                   className="price-type-option"/>
                            <span className="option-name">{price.payType}</span>
                        </Col>
                        <Col className="d-flex align-items-center col-3">
                            <span>{price.fixedExtra.toLocaleString()} {currency}</span>
                        </Col>
                        <Col className="d-flex align-items-center col-3">
                            <span className="option-value-text monthly-price">
                                {
                                    priceHelper.hasRecurrentPrice(price)
                                        ? `${priceHelper.sumPrices([price.recurrentExtra, price.servicesExtra]).toLocaleString()} ${currency}`
                                        : '0'
                                }
                            </span>
                        </Col>
                    </div>
                    <div className="shop-package-option-description">
                        {
                            price.recurrentExtra > 0 &&
                            <span>
                                {
                                    `${coMarketTexts.labels.RECURRENT_PRICE}: ${price.recurrentExtra} ${currency} / ${price.periodUnit}} ${price.packagePayPeriod > 0 ? ` for ${price.packagePayPeriod} ${price.periodUnit}` : ''}`
                                }
                            </span>
                        }
                        {
                            price.servicesExtra > 0 &&
                            <div className="d-flex flex-column">
                                <span>
                                    {
                                        `${coMarketTexts.labels.SERVICE_PRICE}: ${(price.servicesExtra)} ${currency} / ${price.periodUnit} ${price.servicesContractPeriod > 0 ? `for ${price.servicesContractPeriod} ${price.periodUnit}` : ''}`
                                    }
                                </span>
                                {
                                    price.servicesContractPeriod > 0 &&
                                    <span>
                                        {
                                            `${coMarketTexts.labels.EXTEND} ${price.periodUnit} (Max ${price.maxContractPeriod} ${price.periodUnit})`
                                        }
                                    </span>
                                }
                            </div>
                        }
                    </div>
                </Label>
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(AgreementOptionItem);
