import React from 'react';
import superagent from 'superagent';
import { fromUnixTime, formatDistanceToNow } from "date-fns";
import { formatInTimeZone } from 'date-fns-tz';
import { Table, Statistic, Label, Button, Icon, Message, Image } from 'semantic-ui-react'

import constants, { DEFAULT_TIMEZONE } from '../CloudApi/Constants.js';
import * as ApiUtils from '../CloudApi/ApiUtils.js';
import InventoryWrapper from './InventoryWrapper.jsx';
import InventoryItemPickingHint from './InventoryItemPickingHint.jsx';

export default class BigShipmentInventorySlotsTable extends React.Component {
    renderInventorySlotRow(inventorySlot) {
        let cardColor = "grey";
        if (inventorySlot.status === "InventoryItemAdded") {
            cardColor = "green";
        } else if (inventorySlot.status === "NothingInStock") {
            cardColor = "red";
        }

        console.log(inventorySlot);

        return (
            <Table.Row key={inventorySlot.id} negative={inventorySlot.status === "NothingInStock"}>
                <Table.Cell><Image size='mini' src={`/images/${inventorySlot.productType}.png`} /></Table.Cell>
                <Table.Cell>{ApiUtils.splitUpperCamelCase(inventorySlot.productType)}</Table.Cell>
                <Table.Cell><a style={{ textDecoration: "underline" }} href={`/inventory/item/${inventorySlot.id}`}>{inventorySlot.expectedSerialNumber || inventorySlot.expectedSerialNumberPattern}</a></Table.Cell>
                <Table.Cell>
                    {inventorySlot.status === "NothingInStock" ? <Label color="red" icon="times circle">{inventorySlot.status}</Label> : <Label color="green" icon="check circle">{inventorySlot.status}</Label>}
                </Table.Cell>
                <Table.Cell>
                    <InventoryItemPickingHint pickingHint={inventorySlot.pickingHint} />
                </Table.Cell>
            </Table.Row>
        );
    }

    render() {
        return (
            <Table celled>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell></Table.HeaderCell>
                        <Table.HeaderCell>Item Type</Table.HeaderCell>
                        <Table.HeaderCell>Serial Number</Table.HeaderCell>
                        <Table.HeaderCell>Item Status</Table.HeaderCell>
                        <Table.HeaderCell>Info</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {this.props.bigShipment.inventorySlots.map((item, index) => {
                        return this.renderInventorySlotRow(item);
                    })}
                </Table.Body>
            </Table>
        );
    }
}