import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col} from 'reactstrap';
import ShopItem from './components/ShopItem.jsx';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import CoMarketNavContainer from './CoMarketNavContainer.jsx';
import {fetchShopPackages} from '../../actions/coMarket/coMarketPackagesActions';

class CoMarketPackagesContainer extends Component {
    componentDidMount() {
        this.props.dispatch(fetchShopPackages(this.props.selectedCommercialLead));
    }

    render() {
        const {shopPackages, selectedCommercialLead, isLoading} = this.props;

        return (
            <div id="co-market-shop">
                <Row>
                    <Col xl="8" lg="8" md="8" sm="12" xs="12">
                        <WiaasBox id="co-market-big-commercial">
                              <img className="description-photo" src="https://res.cloudinary.com/co-market/image/upload/v1524472688/Co-Market/CoMarketStartsida_MAIN.jpg" alt="big-commercial"/>
                        </WiaasBox>
                    </Col>
                    <Col xl="4" lg="4" md="4" sm="12" xs="12">
                        <WiaasBox id="co-market-commercials">
                            <img alt="wiaas commercial" src="https://res.cloudinary.com/co-market/image/upload/v1524472688/Co-Market/CoMarketStartsida_OFFERCoor.jpg" className="commercial-photo"/>
                        </WiaasBox>
                    </Col>
                </Row>
                <Row>
                    <Col xl="8" lg="12" md="12">
                        <WiaasBox id="co-market-packages" customHeader={CoMarketNavContainer}>
                            <Row>
                                {
                                    isLoading &&
                                    <Col xl="12" className="loader">
                                        <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                                    </Col>
                                }
                                {
                                    (shopPackages && !isLoading) &&
                                    shopPackages.map((shopPackage, mapKey) => <ShopItem key={shopPackage.id}
                                                                                        idCommercialLead={selectedCommercialLead.value}
                                                                                        shopPackage={shopPackage}/>)
                                }
                            </Row>
                        </WiaasBox>
                    </Col>
                </Row>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    shopPackages: state.coMarketPackagesReducer.shopPackages,
    selectedCommercialLead: state.coMarketPackagesReducer.selectedCommercialLead,
    isLoading: state.coMarketPackagesReducer.isLoading
});

export default connect(mapStateToProps)(CoMarketPackagesContainer);