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

        this.state = {};
    }

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

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

    render() {
        const {idGroup, option, currency, simplified} = this.props;
        const selectedPrice = this.props.selectedAgreement ? priceHelper.getSelectedPrice(option, this.props.selectedAgreement) : null;
        const isAvailable = selectedPrice !== undefined;
        const isChecked = this.isChecked();

        if (simplified) {
            return (<div className="d-flex">
                    <Col className="d-flex align-items-center col-6">
                        <span className="option-name">
                            {this.formatName(option.optionName)}
                        </span>
                        {
                            !isAvailable &&
                            <span className="not-available">
                                ({coMarketTexts.labels.SELECTION_NOT_AVAILABLE})
                            </span>
                        }
                    </Col>
                    <Col className="d-flex align-items-center col-3">
                        <span>
                            {
                                isAvailable ?
                                    (selectedPrice.fixedExtra ?
                                        `${selectedPrice.fixedExtra} ${currency}` :
                                        '0') :
                                    '-'
                            }
                        </span>
                    </Col>
                    <Col className="d-flex align-items-center col-3">
                        <span>
                            {
                                isAvailable ?
                                    (priceHelper.hasRecurrentPrice(selectedPrice) ?
                                        `${priceHelper.sumPrices([selectedPrice.recurrentExtra, selectedPrice.servicesExtra])} ${currency}` :
                                        '0') :
                                    '-'
                            }
                        </span>
                    </Col>
            </div>)
        }

        return (
            <div
            id={'info-option-' + idGroup + '-' + option.idOptionPackage}
            className={`shop-package-option d-flex ${this.getClass()}`}
            >
                <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="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>
                        {
                            !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: option.shortDescription}}></div>
                </Label>
            </div>
        );
    }
}

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