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, Segment } 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 InventoryItemsTable extends React.Component {
    render() {
        if (this.props.loading) {
            return (
                <Segment basic loading={this.props.loading} />
            );
        }

        return (
            <Table celled>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Serial Number</Table.HeaderCell>
                        <Table.HeaderCell>Quantity</Table.HeaderCell>
                        <Table.HeaderCell>Item Type</Table.HeaderCell>
                        <Table.HeaderCell>Item Status</Table.HeaderCell>
                        <Table.HeaderCell>Location</Table.HeaderCell>
                        <Table.HeaderCell>Attachments</Table.HeaderCell>
                        <Table.HeaderCell>Created</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {this.props.inventoryItems.map((item, index) => {
                        let createdAtDateTime = fromUnixTime(item.createdAt / 1000);
                        const createdAt = formatInTimeZone(createdAtDateTime, DEFAULT_TIMEZONE, 'PPp z');
                        let isUntrackedAccessory = this.props.schemas.AccessoryBigProductTypes.includes(item.type);

                        let statusLabel = null;
                        if (item.trackingType === "QuantityTracked") {
                            if (item.quantity > 0) {
                                statusLabel = <Label color="green">In Stock</Label>;
                            } else {
                                statusLabel = <Label color="red">Out of Stock</Label>;
                            }
                        } else {
                            if (item.status === "WithShipment") {
                                statusLabel = <Label color="green">{item.status}</Label>;
                            } else if (!isUntrackedAccessory) {
                                statusLabel = <Label>{item.status}</Label>;
                            }
                        }

                        return (
                            <Table.Row key={index}>
                                <Table.Cell><a style={{ textDecoration: "underline" }} href={`/inventory/item/${item.id}`}>{item.serialNumber}</a></Table.Cell>
                                <Table.Cell>
                                    {item.trackingType === "QuantityTracked" && <Label color="blue">{item.quantity}</Label>}
                                </Table.Cell>
                                <Table.Cell><Label>{ApiUtils.splitUpperCamelCase(item.type)}</Label></Table.Cell>
                                <Table.Cell>
                                    {statusLabel}
                                </Table.Cell>
                                <Table.Cell>
                                    {item.trackingType !== "QuantityTracked" && <InventoryItemPickingHint pickingHint={item.pickingHint} />}
                                </Table.Cell>
                                <Table.Cell>
                                    {item.jobId && <Button inverted color="blue" size="tiny" href={`/fabricator/job/${item.jobId}`}><Icon name='cog' />Job #{item.jobId}</Button>}
                                </Table.Cell>
                                <Table.Cell>{createdAt}</Table.Cell>
                            </Table.Row>
                        );
                    })}
                </Table.Body>
            </Table>
        );
    }
}