import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {Row, Col, Container, NavLink} from 'reactstrap';
import CartStepsContainer from './CartStepsContainer.jsx';
import CartItemsContainer from './CartItemsContainer.jsx';
import {cartTexts} from '../../constants/cartConstants';

class CartContainer extends Component {

    render() {
        const {cartSteps, currentStep, cartCount} = this.props;
        const TagName = currentStep && cartSteps && cartSteps[currentStep] ? cartSteps[currentStep].container : null;

        return (
            <Container fluid={true} id="cart-container">
                { cartCount
                    ?   <div>
                            <CartStepsContainer/>
                            <Row>
                                <Col xl="5" lg="5" md="12" xs="12"><CartItemsContainer /></Col>
                                <Col xl="7" lg="7" md="12" xs="12">{TagName && <TagName/>}</Col>
                            </Row>
                        </div>
                    : <Row>
                        <NavLink tag={Link} to='/co-market' id="go-to-co-market-text">{cartTexts.labels.EMPTY_CART}</NavLink>
                      </Row>
                }
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    cartSteps: state.cartReducer.cartSteps,
    currentStep: state.cartReducer.currentStep,
    cartCount: state.cartReducer.cartCount
});

export default connect(mapStateToProps)(CartContainer);