import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Label, Popover, PopoverBody, Input, Col, Row} 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 ?
            'selected-option' :
            '';
    }

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

        return (
            <Row
                className={`option-selection ${this.getClass(selectedAgreement, price)}`}
            >
                <Label check className="row flex-grow-1 no-wrap">
                    <Col className="d-flex align-items-center">
                        <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">
                        <span>{price.fixedExtra.toLocaleString()} {currency}</span>
                    </Col>
                    <Col className="d-flex align-items-center">
                        <span className="option-value-text monthly-price">
                        {
                            priceHelper.hasRecurrentPrice(price)
                                ? `${priceHelper.sumPrices([price.recurentExtra, price.servicesExtra]).toLocaleString()} ${currency}`
                                : '0'
                        }
                    </span>
                    </Col>
                </Label>
                <i className="price-info-btn fa fa-info-circle d-flex align-items-center"
                   aria-hidden="true"
                   id={'info-additonal-' + price.idPaymentType}
                   onClick={this.toggle}></i>
                <Popover placement="bottom"
                            isOpen={this.state.popoverOpen}
                            target={'info-additonal-' + price.idPaymentType}
                            className="price-info-popover"
                            container="shop-package-buy-info"
                            toggle={this.toggle}>
                   <PopoverBody>
                       <div>
                           {
                               price.recurentExtra > 0 &&
                               <div className="package-price-recurrent">
                                   <span className="price-info-title">{coMarketTexts.labels.RECURRENT_PRICE}: </span>
                                   {(price.recurentExtra).toLocaleString()} {currency} / {price.periodUnit}
                                   {
                                       price.packagePayPeriod > 0 &&
                                       <span>
                                           {' '} for {price.packagePayPeriod} {price.periodUnit}
                                       </span>
                                   }
                               </div>
                           }
                           {
                               price.servicesExtra > 0 &&
                               <div className="services-price-recurrent">
                                   <span className="price-info-title">{coMarketTexts.labels.SERVICE_PRICE}: </span>
                                   {(price.servicesExtra).toLocaleString()} {currency} / {price.periodUnit}
                                   {
                                       price.servicesContractPeriod > 0 &&
                                       <span>
                                           {' '} for {price.servicesContractPeriod} {price.periodUnit} {coMarketTexts.labels.EXTEND} {price.periodUnit} (Max {price.maxContractPeriod} {price.periodUnit})
                                       </span>
                                   }
                               </div>
                           }
                       </div>
                   </PopoverBody>
                </Popover>
            </Row>
        );
    }
}

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

export default connect(mapStateToProps)(AgreementOptionItem);