import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
    Navbar,
    Row,
    Col,
    Button
} 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';
import {coMarketTexts} from "../../constants/coMarketConstants";

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

    onLoadMore() {
        if (this.props.selectedShop) {
            this.props.dispatch(fetchShopPackages(this.props.selectedShop, this.props.shopPage + 1));
        }
    }

    render() {
        const {shopPackages, selectedShop, isLoading, shopHasMorePackages, shopSearch} = this.props;

        return (
            <div id="co-market-shop">
                <Col>
                    <Navbar></Navbar>
                </Col>
                <Row>
                    <Col xl="8" lg="8" md="8" sm="12" xs="12">
                        <WiaasBox id="co-market-big-commercial">
                              <img className="description-photo" src="/static/img/WIAAS_Market_banner.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="/static/img/WIAAS_Market_SMO_infobox.jpg" className="commercial-photo"/>
                        </WiaasBox>
                    </Col>
                </Row>
                <Row>
                    <Col xl="8" lg="12" md="12">
                        <WiaasBox id="co-market-packages" customHeader={CoMarketNavContainer}>
                            <Row>
                                {
                                    (shopPackages) &&
                                    shopPackages.map((shopPackage, mapKey) => <ShopItem key={shopPackage.id}
                                                                                        shopId={selectedShop.id}
                                                                                        shopPackage={shopPackage}/>)
                                }
                                {
                                    isLoading &&
                                    <Col xl="12" className="loader">
                                        <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                                    </Col>
                                }
                            </Row>
                        </WiaasBox>
                    </Col>
                </Row>
                {
                    shopHasMorePackages && !isLoading && !shopSearch && (
                        <Row>
                            <Col xl="8" lg="12" md="12">
                                <Button
                                    size="lg" block outline
                                    className="shop-package-load-more-btn"
                                    onClick={() => {this.onLoadMore()}}
                                >{coMarketTexts.buttons.LOAD_MORE}</Button>
                            </Col>
                        </Row>)
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    shopPackages: state.coMarketPackagesReducer.shopPackages,
    shopHasMorePackages: state.coMarketPackagesReducer.shopHasMorePackages,
    shopPage: state.coMarketPackagesReducer.shopPage,
    shopSearch: state.coMarketPackagesReducer.shopSearch,
    selectedShop: state.coMarketPackagesReducer.selectedShop,
    isLoading: state.coMarketPackagesReducer.isLoading
});

export default connect(mapStateToProps)(CoMarketPackagesContainer);