import React, {Component} from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';
import {Label, 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.handleOptionChange = this.handleOptionChange.bind(this);
        this.isChecked = this.isChecked.bind(this);
        this.state = {};
    }

    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() {
        return this.isChecked() ?
            'shop-package-option-selected' :
            '';
    }

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

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

        const classes = classnames('shop-package-option d-flex',
            {
                'shop-package-option-selected': isChecked,
                'shop-package-option-disabled': !isAvailable,
            });

        return (
            <div
            id={'info-additonal-' + additionalPackage.idAdditionalPackage}
            className={classes}
            >
                <Label check className="d-flex flex-grow-1 flex-column">
                    <div className="d-flex">
                        <Col className="col-6 d-flex align-items-center">
                            <Input type="checkbox"
                                checked={isChecked}
                                onChange={this.handleOptionChange}
                                name={'package-option-'+ additionalPackage.idAdditionalPackage}
                                className="package-option-input"
                                disabled={!isAvailable}
                            />
                            <span className="option-name">
                                {this.formatName(additionalPackage.packageName)}
                            </span>
                            {
                                !isAvailable &&
                                <span className="not-available">
                                    ({coMarketTexts.labels.SELECTION_NOT_AVAILABLE})
                                </span>
                            }
                        </Col>
                        <Col className="col-3 d-flex align-items-center">
                            <span>
                                {
                                    isAvailable ?
                                        (selectedPrice.fixedExtra ?
                                            `${selectedPrice.fixedExtra} ${currency}` :
                                            '0') :
                                        '-'
                                }
                            </span>
                        </Col>
                        <Col className="col-3 d-flex align-items-center">
                            <span>
                                {
                                    isAvailable ?
                                        (priceHelper.hasRecurrentPrice(selectedPrice) ?
                                            `${priceHelper.sumPrices([selectedPrice.recurrentExtra, selectedPrice.servicesExtra])} ${currency}` :
                                            '0') :
                                        '-'
                                }
                            </span>
                        </Col>
                    </div>
                    <div
                    className="shop-package-option-description"
                    dangerouslySetInnerHTML={{__html: additionalPackage.shortDescription}}
                    ></div>
                </Label>
            </div>
        );
    }
}

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