import React, {Component} from 'react';
import {Container, TabContent, TabPane, Nav, NavItem, NavLink, Row, Col} from 'reactstrap';
import classnames from 'classnames';
import './style/Orders.css';
import OrdersDataContainer from './OrdersDataContainer.jsx';
import ProcessContainer from './ProcessContainer.jsx';
import {orderTexts} from '../../constants/ordersConstants';

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

        this.toggle = this.toggle.bind(this);
        this.state = {
          activeTab: '1'
        };
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
              activeTab: tab
            });
        }
    }

    render() {
        const urlParams = this.props.match.params;

        return (
            <Container fluid={true} id="orders-container">
                <Row>
                    <Col lg="12" md="12" sm="12" xs="12">
                        {
                            urlParams.idOrder ?
                            <ProcessContainer idOrder={urlParams.idOrder}/> :
                            <div id="orders-list-container">
                                <Nav tabs>
                                  <NavItem>
                                    <NavLink id="activeOrders" className={classnames({active: this.state.activeTab === '1'}) + ' orders-tab'}
                                             onClick={() => { this.toggle('1'); }}>
                                     {orderTexts.labels.ACTIVE_ORDERS}
                                    </NavLink>
                                  </NavItem>
                                  <NavItem>
                                    <NavLink  id="historyOrders" className={classnames({ active: this.state.activeTab === '2' }) + ' orders-tab'}
                                             onClick={() => { this.toggle('2'); }}>
                                      {orderTexts.labels.ORDER_HISTORY}
                                    </NavLink>
                                  </NavItem>
                                </Nav>

                                <TabContent activeTab={this.state.activeTab}>
                                  <TabPane tabId="1">
                                    <Row>
                                     <Col lg="12" md="12" sm="12" xs="12">
                                        <OrdersDataContainer type="active" />
                                      </Col>
                                    </Row>
                                  </TabPane>
                                  <TabPane tabId="2">
                                    <Row>
                                        <Col lg="12" md="12" sm="12" xs="12">
                                           <OrdersDataContainer type="history" />
                                         </Col>
                                    </Row>
                                  </TabPane>
                                </TabContent>
                            </div>
                        }
                    </Col>
                </Row>
            </Container>
        );
    }
}

export default OrdersContainer;
