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 PackageOptionGroup from './components/PackageOptionGroup';
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,
            shopId: this.props.shopId,
        };
        this.props.dispatch(addToCart(addParams));
    }

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

    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">
                                            <PackagePrice currency={selectedPackage.currency} />
                                            <AgreementOptions
                                                prices={selectedPackage.prices}
                                                currency={selectedPackage.currency}/>
                                            {
                                                selectedPackage.additionalPackages && selectedPackage.additionalPackages.length > 0 && selectedAgreement &&
                                                <AdditionalPackages
                                                    additionalPackages={selectedPackage.additionalPackages}
                                                    currency={selectedPackage.currency}/>
                                            }
                                            {
                                                selectedPackage.groups && Object.keys(selectedPackage.groups).length > 0 && selectedAgreement &&
                                                (<div className="shop-package-options">
                                                    {
                                                        Object.keys(selectedPackage.groups).map(groupKey => {
                                                            const group = selectedPackage.groups[groupKey];
                                                            return (<PackageOptionGroup
                                                                key={groupKey}
                                                                group={group}
                                                                currency={selectedPackage.currency}/>);
                                                        })
                                                    }
                                                 </div>)
                                            }
                                            <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);
