import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {Button} from 'reactstrap';
import { WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasTable.jsx';
import {dashboardTexts} from '../../../constants/dashboardConstants';

class OrderItem extends Component {
    render() {
        const {order, isViewAllOrdersChecked} = this.props;

        return (
            <WiaasTableRow className={'order-central-row line-' + order.status}>
               <WiaasTableCol header="#">
                   <i className="fa fa-list-alt package-photo" aria-hidden="true" />
                   <div className="orderNumber">{order.number}</div>
               </WiaasTableCol>
               <WiaasTableCol header={dashboardTexts.tableHeaders.ORDER_DATE}>{order.dateCreated}</WiaasTableCol>
               {
                   isViewAllOrdersChecked &&
                   <WiaasTableCol header={dashboardTexts.tableHeaders.PLACED_BY}>{order.customer ? order.customer.name : ''}</WiaasTableCol>
               }
               <WiaasTableCol header={dashboardTexts.tableHeaders.REFERENCE}>{order.reference}</WiaasTableCol>
               <WiaasTableCol header={dashboardTexts.tableHeaders.ON_DELIVERY}>{order.fixedPrice.toLocaleString()} {order.currency}</WiaasTableCol>
               <WiaasTableCol header={dashboardTexts.tableHeaders.MONTHLY}>{order.recurringPrice.toLocaleString()} {order.currency}</WiaasTableCol>
               <WiaasTableCol header={dashboardTexts.tableHeaders.STATUS}>
                   <div className={'status-icon ' + order.status}></div>{dashboardTexts.statuses[order.status]}
               </WiaasTableCol>
               <WiaasTableCol><Link to={'orders/'+ order.id}><Button className="wiaas-button">{dashboardTexts.buttons.DETAILS}</Button></Link></WiaasTableCol>
           </WiaasTableRow>
        );
    }
}

export default OrderItem;