import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Alert, Row, Col} from 'reactstrap';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import {getActiveOrders, getHistoryOrders} from '../../actions/orders/ordersActions';
import OrderList from './components/OrderList.jsx';
import OrderListHeader from './components/OrderListHeader.jsx';
import {orderTexts} from '../../constants/ordersConstants';

class OrdersDataContainer extends Component {
    componentDidMount() {
        this.props.dispatch(getActiveOrders());
        this.props.dispatch(getHistoryOrders());
    }
    render() {
        const {activeOrders, historyOrders, type, isLoading, isViewAllOrdersChecked} = this.props;
        let orders = type ? type === 'active' ? activeOrders : historyOrders : [];
        const viewAllOrders = isViewAllOrdersChecked && isViewAllOrdersChecked[type];
        if (!viewAllOrders) {
            // show only current customer orders
            orders = orders.filter(o => o.isMyOrder);
        }
        const mainTitleOrder = type.charAt(0).toUpperCase() + type.slice(1);

        return (
            <Row>
                <Col lg="12" xs="12">
                    <WiaasBox id={type + "-orders-container"} mainTitle={mainTitleOrder + " Orders"} customHeader={OrderListHeader} customHeaderParams={type}>
                        {
                            isLoading &&
                            <div className="loader">
                                <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                            </div>
                        }
                        { (orders  && !isLoading) &&
                           <OrderList orders={orders} type={type} showOrderCustomer={viewAllOrders}/>
                        }
                        {
                            !isLoading && orders.length === 0 &&
                            <Alert color="info">{orderTexts.labels.NO_RECORDS}</Alert>
                        }
                    </WiaasBox>
                </Col>
            </Row>
        );
    }
}

const mapStateToProps = (state) => ({
    activeOrders: state.ordersReducer.activeOrders || [],
    historyOrders: state.ordersReducer.historyOrders || [],
    isLoading: state.ordersReducer.isLoading,
    isViewAllOrdersChecked: state.ordersReducer.isViewAllOrdersChecked,
});

export default connect(mapStateToProps)(OrdersDataContainer);