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

const priceHelper = new PriceHelper();

class PackageOptionItem 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(selectOption(this.props.idGroup, this.props.option));
    }

    isChecked() {
        return this.props.selectedOptions
            && this.props.selectedOptions[this.props.idGroup]
            && this.props.selectedOptions[this.props.idGroup].idOptionPackage === this.props.option.idOptionPackage;
    }

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

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

    render() {
        const {idGroup, option, country} = this.props;
        const selectedPrice = this.props.selectedAgreement ? priceHelper.getSelectedPrice(option, this.props.selectedAgreement) : null;
        const isChecked = this.isChecked();

        return (
            <Col xl="4" lg="4" md="6" xs="6" className="option-value">
                <div className={'form-check-inline option-selection ' + this.getClass(isChecked)}>
                    <Label check>
                        <Input type="radio"
                               name={'package-option-'+ idGroup}
                               className="package-option-input"
                               onChange={this.handleOptionChange}
                               checked={isChecked}
                               value={option.idOptionPackage}/>
                           <div className="option-name">{this.formatName(option.optionName)}</div>
                           <div className="option-description" dangerouslySetInnerHTML={{__html: option.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 && selectedPrice.fixedExtra.toLocaleString() + ' ' + country.currency} </td>
                                               <td>
                                                   {
                                                        priceHelper.hasRecurrentPrice(selectedPrice) ?
                                                        <div className="option-value-text monthly-price">
                                                          {priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {country.currency}
                                                        </div>
                                                        : <div className="option-value-text monthly-price"> 0 </div>
                                                    }
                                                </td>
                                           </tr>
                                       </tbody>
                                   </table>
                               </div>
                           }
                    </Label>
                    {
                        !selectedPrice &&
                        <Label>
                            <div className="not-available">
                                ({coMarketTexts.labels.NOT_AVAILABLE})
                                <i className="price-info-btn fa fa-info-circle"
                                    aria-hidden="true"
                                    id={'info-option-' + idGroup + '-' + option.idOptionPackage}
                                    onClick={this.toggle}></i>
                            </div>
                        </Label>
                    }
                </div>
                <Popover placement="bottom"
                            isOpen={this.state.popoverOpen}
                            target={'info-option-' + idGroup + '-' + option.idOptionPackage}
                            toggle={this.toggle}>
                   <PopoverBody>
                       {coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
                   </PopoverBody>
                </Popover>
            </Col>
        );
    }
}

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