import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col} from 'reactstrap';
import {WiaasTable, WiaasTableBody} from '../../mainComponents/table/WiaasTable.jsx';
import CartItem from './components/CartItem.jsx';
import {cartTexts} from '../../constants/cartConstants';
import './style/Cart.css';

class CartItemsContainer extends Component {
    getOrderCommercialLead() {
        return this.props.cartItems.length ? this.props.cartItems[0].commercialLead : '';
    }

    render() {
        const {cartItems, isCartItemsDisabled, orderTotalPrice, isLoading} = this.props;

        return (
                <WiaasTable>
                    {
                        isLoading &&
                        <div className="loader">
                            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                        </div>
                    }
                    {
                        (cartItems && cartItems.length && !isLoading) &&
                            <WiaasTableBody id="cart-items-container">

                                {cartItems.map((cartItem, mapKey) => <CartItem key={cartItem.idPackage}
                                    cartItem={cartItem}
                                    cartItemNo={mapKey}
                                    isFormDisabled={isCartItemsDisabled}/>)}

                                <div id="total-price-in-cart-container" className="cart-show-items">
                                    <Row id={"cart-total-price"} className="cart-total-price">
                                        <Col lg="3" xs="3" className="item-name d-flex align-items-center">
                                            <span>
                                                {cartTexts.labels.TOTAL_PRICE}:
                                            </span>
                                        </Col>
                                        {
                                            orderTotalPrice &&
                                            <Col className="d-flex">
                                                <div className="d-flex flex-column flex-grow-1">
                                                    <div className="d-flex flex-grow-1 no-wrap cart-total-price-header">
                                                        <Col>
                                                            <span>{cartTexts.labels.ON_DELIVERY}:</span>
                                                        </Col>
                                                        <Col>
                                                            <span>{cartTexts.labels.MONTHLY}:</span>
                                                        </Col>
                                                    </div>
                                                    <div className="d-flex flex-grow-1 no-wrap item-price-value">
                                                        <Col>
                                                            <h5>
                                                                {orderTotalPrice.fixedPrice.toLocaleString()} {orderTotalPrice.currency} {' '}
                                                            </h5>
                                                        </Col>
                                                        <Col>
                                                            <h5>
                                                                {
                                                                    orderTotalPrice.recurrentPrice && orderTotalPrice.recurrentPrice.toLocaleString() + ' ' + orderTotalPrice.currency
                                                                }
                                                            </h5>
                                                        </Col>
                                                    </div>
                                                </div>
                                            </Col>
                                        }
                                    </Row>
                                </div>
                            </WiaasTableBody>
                    }
                </WiaasTable>
        );
    }
}

const mapStateToProps = (state) => ({
    cartItems: state.cartReducer.cartItems,
    isCartItemsDisabled: state.cartReducer.isCartItemsDisabled,
    orderTotalPrice: state.cartReducer.orderTotalPrice,
    isLoading: state.cartReducer.isLoading
});

export default connect(mapStateToProps)(CartItemsContainer);