import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Button} from 'reactstrap';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import {fetchPackageDetails, addToCart} from '../../actions/coMarket/coMarketPackageDetailsActions';
import PackageInfo from './components/PackageInfo.jsx';
import PackagePrice from './components/PackagePrice.jsx';
import PackageOptions from './components/PackageOptions.jsx';
import AdditionalPackages from './components/AdditionalPackages.jsx';
import AgreementOptions from './components/AgreementOptions.jsx';
import {coMarketTexts} from '../../constants/coMarketConstants';
import './style/CoMarketPackageDetailsContainer.css';

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

        this.handleAddToCart = this.handleAddToCart.bind(this);
        this.state = {
          selectedOptions: {}
        };
    }

    handleAddToCart() {
        const addParams = {
            selectedPackage: this.props.selectedPackage,
            selectedAgreement: this.props.selectedAgreement,
            selectedOptions: this.props.selectedOptions,
            selectedAdditionals: this.props.selectedAdditionals
        };
        this.props.dispatch(addToCart(addParams));
    }

    componentDidMount() {
        const {idPackage, idCommercialLead} = this.props;
        this.props.dispatch(fetchPackageDetails({idPackage, idCommercialLead}));
    }

    render() {
        const {selectedPackage, selectedAgreement, messages, isLoading} = this.props;
        return(
            <div id="co-market-package-details">
                <Row>
                    <Col xl="12" lg="12">
                        <WiaasBox>
                            {
                                isLoading &&
                                <div className="loader">
                                    <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                                </div>
                            }
                            {
                                (selectedPackage && !isLoading) &&
                                <Row>
                                    <Col xl="6" lg="5" md="12" xs="12">
                                        <PackageInfo
                                            name={selectedPackage.name}
                                            reference={selectedPackage.reference}
                                            shortDescription={selectedPackage.shortDescription}
                                            country={selectedPackage.country}
                                            countryCode={selectedPackage.countryCode}
                                            documents={selectedPackage.documents} />
                                    </Col>

                                    <Col xl="6" lg="7" md="12" xs="12">
                                        <div id="shop-package-buy-info">
                                            {
                                                selectedPackage.groups && Object.keys(selectedPackage.groups).length > 0 && selectedAgreement &&
                                                <PackageOptions
                                                    groups={selectedPackage.groups}
                                                    country={selectedPackage.country}/>
                                            }
                                            {
                                                selectedPackage.additionalPackages && selectedPackage.additionalPackages.length > 0 && selectedAgreement &&
                                                <AdditionalPackages
                                                    additionalPackages={selectedPackage.additionalPackages}
                                                    country={selectedPackage.country}/>
                                            }
                                            <AgreementOptions
                                                prices={selectedPackage.prices}
                                                currency={selectedPackage.currency}/>
                                            <Row className="justify-content-end" style={{ marginTop: 30 }}>
                                                <Button id="add-to-cart-btn"
                                                        className="add-to-cart-btn"
                                                        onClick={this.handleAddToCart}
                                                        color="secondary">
                                                    <i className="fa fa-shopping-cart" aria-hidden="true"></i>
                                                    {' '}{coMarketTexts.buttons.ADD_TO_CART}
                                                </Button>
                                            </Row>
                                            {messages && <span>{messages[0].message}</span>}
                                        </div>
                                    </Col>
                                </Row>
                            }
                        </WiaasBox>
                    </Col>
                </Row>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    selectedPackage: state.coMarketPackageDetailsReducer.selectedPackage,
    selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
    selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions,
    selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals,
    messages: state.coMarketPackageDetailsReducer.messages,
    isLoading: state.coMarketPackageDetailsReducer.isLoading
});

export default connect(mapStateToProps)(CoMarketPackageDetailsContainer);