import React, {Component} from 'react';
import OrderItem from './OrderItem';
import {WiaasTable, WiaasTableHeader, WiaasTableBody} from '../../../mainComponents/table/WiaasTable.jsx';
import {dashboardTexts} from '../../../constants/dashboardConstants';

class OrdersList extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isViewAllOrdersChecked: this.props.isViewAllOrdersChecked || false
        };
        this.getHeaderForOrders = this.getHeaderForOrders.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isViewAllOrdersChecked: nextProps.isViewAllOrdersChecked});
    }

    getHeaderForOrders() {
        const headers = [
            dashboardTexts.tableHeaders.ORDER,
            dashboardTexts.tableHeaders.ORDER_DATE,
            dashboardTexts.tableHeaders.REFERENCE,
            dashboardTexts.tableHeaders.ON_DELIVERY,
            dashboardTexts.tableHeaders.MONTHLY,
            dashboardTexts.tableHeaders.STATUS,
            ''
        ];
        if(this.state.isViewAllOrdersChecked) {
            headers.splice(2, 0, dashboardTexts.tableHeaders.PLACED_BY);
            headers.join();
        }

        return headers;
    }

    render() {
        const {orders, isViewAllOrdersChecked} = this.props;

        return (
            <div>
                <WiaasTable>
                    <WiaasTableHeader headers={this.getHeaderForOrders()}/>
                    <WiaasTableBody>
                        {
                            orders &&
                            orders.map((order, index) =>
                                <OrderItem key={'order-' + order.number} order={order} isViewAllOrdersChecked={isViewAllOrdersChecked}/>
                             )
                        }
                    </WiaasTableBody>
                </WiaasTable>
            </div>
        );
    }
}

export default OrdersList;