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

const priceHelper = new PriceHelper();

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

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

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

    handleOptionChange() {
        if(!this.isChecked()){
            this.props.dispatch(selectAdditional(this.props.additionalPackage))
        }else{
            this.props.dispatch(removetAdditional(this.props.additionalPackage));
        }
    }

    isChecked() {
        return this.props.selectedAdditionals
            && this.props.selectedAdditionals.includes(this.props.additionalPackage);
    }

    isAvailable() {
        return this.props.additionalPackage.prices.find(price => {
            return price.idPaymentType === this.props.selectedAgreement.idPaymentType;
        });
    }

    getClass(isChecked) {
        return isChecked ?
            'selected-option' :
            '';
    }

    formatName(name) {
        return name.length > 39 ? name.substring(0, 40) + '...' : name;
    }

    render() {
        const {additionalPackage, country} = this.props;
        const isAvailable = this.isAvailable();
        const selectedPrice = priceHelper.getSelectedPrice(additionalPackage, this.props.selectedAgreement);
        const isChecked = this.isChecked();

        return (
            <Col xl="4" lg="4" md="6" xs="6"  className="option-value">
                <div className={'option-selection ' + this.getClass(isChecked)}>
                    <Label check>
                        <Input type="checkbox"
                               onChange={this.handleOptionChange}
                               name={'package-option-'+ additionalPackage.idAdditionalPackage}
                               className="package-option-input"/>
                           <div className="option-name">{this.formatName(additionalPackage.packageName)}</div>
                           <div className="option-description" dangerouslySetInnerHTML={{__html: additionalPackage.shortDescription}}></div>
                           {
                               priceHelper.hasFixedPrice(selectedPrice) &&
                               <div className="option-prices">
                                   <table className="price-table option-price-table">
                                       <thead>
                                           <tr>
                                               <th>{coMarketTexts.labels.ON_DELIVERY}</th>
                                               <th>{coMarketTexts.labels.MONTHLY}</th>
                                           </tr>
                                       </thead>
                                       <tbody>
                                           <tr>
                                               <td>{selectedPrice.fixedExtra > 0 ? selectedPrice.fixedExtra.toLocaleString() : 0} {country.currency}</td>
                                               <td>
                                                   <div className="option-value-text monthly-price">
                                                   {
                                                        priceHelper.hasRecurrentPrice(selectedPrice)
                                                        ? priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString() + ' '
                                                        : 0
                                                    } {country.currency}
                                                    </div>
                                                </td>
                                           </tr>
                                       </tbody>
                                   </table>
                               </div>
                           }

                    </Label>
                    {
                        !isAvailable &&
                        <span className="not-available">
                            ({coMarketTexts.labels.NOT_AVAILABLE})
                            <i className="price-info-btn fa fa-info-circle"
                                aria-hidden="true"
                                id={'info-additonal-' + additionalPackage.idAdditionalPackage}
                                onClick={this.toggle}></i>
                        </span>
                    }
                </div>

                <Popover placement="bottom"
                            isOpen={this.state.popoverOpen}
                            target={'info-additonal-' + additionalPackage.idAdditionalPackage}
                            toggle={this.toggle}>
                   <PopoverBody>
                       {coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
                   </PopoverBody>
                </Popover>
            </Col>
        );
    }
}

const mapStateToProps = (state) => ({
    selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
    selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals
});
export default connect(mapStateToProps)(AdditionalPackageItem);
