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 className="cart-total-price">
                                        <Col lg="5" xs="5" className="item-name">
                                            {cartTexts.labels.TOTAL_PRICE}:
                                        </Col>
                                        {
                                            orderTotalPrice &&
                                            <Col id={"cart-total-price"}
                                                lg="7" xs="7"
                                                className="item-name">
                                                <table className="price-table">
                                                    <thead>
                                                        <tr>
                                                            <th>{cartTexts.labels.ON_DELIVERY}</th>
                                                            <th>{cartTexts.labels.MONTHLY}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                {orderTotalPrice.fixedPrice.toLocaleString()} {orderTotalPrice.currency} {' '}
                                                            </td>
                                                            <td>
                                                                {
                                                                    orderTotalPrice.recurrentPrice && orderTotalPrice.recurrentPrice.toLocaleString() + ' ' + orderTotalPrice.currency
                                                                }
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>

                                            </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);
