import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Button} from 'reactstrap';
import {Link} from 'react-router-dom';
import {WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasTable.jsx';
import {orderTexts} from '../../../constants/ordersConstants';
import '../style/Orders.css';
import OrderPackage from './OrderPackage.jsx';

class ActiveOrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showPackages: false
        };

        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState({
            showPackages: !this.state.showPackages
        });
    }

    getIconClass(type) {
        return 'fa fa-angle-' + type + ' toggle-view-packages';
    }

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

        return (
            <div>
                <WiaasTableRow className={"order-central-row order-border-" + order.status}>
                   <WiaasTableCol header="#">
                       {!this.state.showPackages && <i className={this.getIconClass('down')} aria-hidden="true" onClick={this.toggle}></i>}
                       {this.state.showPackages && <i className={this.getIconClass('up')} aria-hidden="true" onClick={this.toggle}></i>}
                       <i className="fa fa-list-alt package-photo" aria-hidden="true" />
                       <div className="order-number">{order.orderNumber}</div>
                    </WiaasTableCol>
                    <WiaasTableCol header={orderTexts.labels.REFERENCE}>{order.reference ? order.reference : '-'}</WiaasTableCol>
                    {isViewAllOrdersChecked['active'] && <WiaasTableCol header={orderTexts.labels.PLACED_BY}>{order.customerName ? order.customerName : ''}</WiaasTableCol>}
                    <WiaasTableCol header={orderTexts.labels.ORDER_DATE}>{order.orderDate ? order.orderDate : '-'}</WiaasTableCol>
                    <WiaasTableCol header={orderTexts.labels.EST_DELIVERY}>{order.estimatedDeliveryDate ? order.estimatedDeliveryDate : '-'}</WiaasTableCol>
                    <WiaasTableCol header="Catalogue">
                       <div className="order-item-cl">
                           <img className="cl-photo" src="static/img/man-icon.png" alt="Catalogue" />
                           <div className="cl-details">
                               <div className="cl-contact-name">{order.clContactName}</div>
                               <div className="cl-name">{order.clName}</div>
                           </div>
                       </div>
                    </WiaasTableCol>
                    <WiaasTableCol header={orderTexts.labels.AMOUNT}>
                        {order.orderCurrency && order.orderCurrency.currency
                            ? order.orderTotalPrice.toLocaleString() + ' ' + order.orderCurrency.currency
                            : parseFloat(order.orderTotalPrice).toLocaleString()}
                    </WiaasTableCol>
                    <WiaasTableCol header={orderTexts.labels.STATUS}>
                       <div className={'status-icon ' + order.status}></div>{order.status}
                    </WiaasTableCol>
                    <WiaasTableCol header="Buttons details">
                        <Link to={'/orders/' + order.id} className="actions-link">
                            <Button color="secondary" className="actions-button">{orderTexts.buttons.DELIVERY_DETAILS}</Button>
                        </Link>

                    </WiaasTableCol>
               </WiaasTableRow>
                { this.state.showPackages && <OrderPackage order={order} type="active"/> }
           </div>
        );
    }
}

const mapStateToProps = (state) => ({
    isViewAllOrdersChecked: state.ordersReducer.isViewAllOrdersChecked
});
export default connect(mapStateToProps)(ActiveOrderItem);