import React from 'react';
import { fromUnixTime, formatDistanceToNow } from "date-fns";
import { formatInTimeZone } from 'date-fns-tz';
import superagent from 'superagent';

import * as ApiUtils from '../CloudApi/ApiUtils.js';
import constants, { DEFAULT_TIMEZONE } from '../CloudApi/Constants.js';
import BigShipperWrapper from './BigShipperWrapper.jsx';
import { Card, Button, Table, Statistic, Label, Message, Icon, Image } from 'semantic-ui-react'
import InventoryItemPickingHint from './InventoryItemPickingHint.jsx';

export default class BigShipmentInventoryCards extends React.Component {
    constructor(props) {
        super(props);
    }

    async removeInventoryItem(e) {
    }

    async onAddToShipment(inventorySlot) {
        if (this.props.onAddAccessoryInventoryItem) {
            await this.props.onAddAccessoryInventoryItem(inventorySlot);
        } else {
            alert("Fucked");
        }
    }

    renderInventorySlot(inventorySlot) {
        let cardColor = "grey";
        if (inventorySlot.status === "InventoryItemAdded") {
            cardColor = "green";
        } else if (inventorySlot.status === "NothingInStock") {
            cardColor = "red";
        }

        // HACK HACK HACK
        //
        // Assume scannable items are 
        let isScannableItem = !(this.props.schemas.AccessoryBigProductTypes.includes(inventorySlot.productType) || inventorySlot.productType === "AudioStrapV1" || inventorySlot.productType === "Other");

        let trackingType = "Unknown";
        if (inventorySlot.item && inventorySlot.item.trackingType) {;
            trackingType = inventorySlot.item.trackingType;
        } else if (inventorySlot.pickingHint && inventorySlot.pickingHint.inventoryItem) {
            trackingType = inventorySlot.pickingHint.inventoryItem.trackingType || "Unknown";
        }

        const title = inventorySlot.displayName || ApiUtils.splitUpperCamelCase(inventorySlot.productType) || "Unknown Product Type";

        console.log(inventorySlot);

        return (
            <Card inverted color={cardColor}>
                <Card.Content>
                    <Image floated='right' size='mini' src={`/images/${inventorySlot.productType}.png`} />
                    <Card.Header>{title} </Card.Header>
                    <Card.Description>
                        {inventorySlot.status === "InventoryItemAdded" && (
                            <Message icon inverted color="green">
                                <Icon name="check circle" />
                                <Message.Content><Message.Header as="h2">Added to shipment</Message.Header>
                                </Message.Content>
                            </Message>
                        )}

                        {inventorySlot.status !== "NothingInStock" && (
                            <InventoryItemPickingHint pickingHint={inventorySlot.pickingHint} />
                        )}

                        {inventorySlot.status === "NothingInStock" && (
                            <Message icon inverted color="red">
                                <Icon name="times circle" />
                                <Message.Content><Message.Header as="h2">Nothing in stock</Message.Header>
                                </Message.Content>
                            </Message>
                        )}

                        {(!isScannableItem && inventorySlot.status !== "InventoryItemAdded") &&
                            (
                                <>
                                    {(trackingType === "Untracked") && <Message icon inverted color="blue">
                                        <Icon name="warning circle" />
                                        <Message.Content>
                                            <Message.Header as="h2">Inventory not tracked</Message.Header>
                                            Stock availability unknown.
                                        </Message.Content>
                                    </Message>}
                                    <Button onClick={this.onAddToShipment.bind(this, inventorySlot)} color="blue" icon="plus" content="Add to shipment" />
                                </>
                            )
                        }

                        {isScannableItem && (
                            <Table basic='very' striped celled compact>
                                <Table.Body>
                                    <Table.Row>
                                        <Table.Cell collapsing>Serial Number</Table.Cell>
                                        <Table.Cell>{inventorySlot.expectedSerialNumber || inventorySlot.expectedSerialNumberPattern}</Table.Cell>
                                    </Table.Row>
                                    <Table.Row>
                                        <Table.Cell collapsing>Item Status</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.Row>
                                </Table.Body>
                            </Table>
                        )}
                    </Card.Description>
                </Card.Content>
            </Card>
        );
    }

    render() {
        return (
            <Card.Group itemsPerRow={3}>
                {this.props.bigShipment.inventorySlots.map(inventorySlot => this.renderInventorySlot(inventorySlot))}
            </Card.Group>
        );
    }
}