import React from 'react';

import * as ApiUtils from '../CloudApi/ApiUtils.js';
import { Label, Message, Icon } from 'semantic-ui-react'

export default class InventoryItemPickingHint extends React.Component {
    render() {
        if (!this.props.pickingHint) {
            return null;
        }


        let alertLabel = null;

        let color = "red";
        if (this.props.pickingHint.type === "BeyondCushionV1") {
            color = "black";
        } else if (this.props.pickingHint.type === "BigscreenBeyondV1") {
            color = "brown";
        } else if (this.props.pickingHint.type === "ReplacementBigscreenBeyondV1") {
            color = "purple";
            alertLabel = <Label fluid color="purple">This is a Replacement Beyond</Label>;
        } else if (this.props.pickingHint.type === "PrescriptionLensInserts") {
            color = "teal";
        } else {
            color = "blue";
        }

        let trackingType = this.props.pickingHint.inventoryItem ? (this.props.pickingHint.inventoryItem.trackingType || "Untracked") : "Untracked";
        if (trackingType === "QuantityTracked") {
            alertLabel = <Label fluid color="purple">Quantity Tracked</Label>;
            color = "purple";
        }

        if (this.props.pickingHint.binIdentifier) {
            return (
                <Message icon color={color}>
                    <Message.Content>
                        <Message.Header as="h1" style={{ fontSize: "6em" }}>{this.props.pickingHint.binIdentifier}</Message.Header>
                        <Message.Header as="h2">Bin: {parseInt(this.props.pickingHint.binIdentifier, 10)}</Message.Header>
                        <Message.Header as="h2">IPD:&nbsp;{this.props.pickingHint.ipd}</Message.Header>
                        <Message.Header as="h2">Shopify Id: {this.props.pickingHint.shopifyOrderId}</Message.Header>
                    </Message.Content>
                </Message>
            );
        } else if (trackingType === "Untracked") {
            return (
                <Message icon color={color}>
                    <Icon name="warning circle" />
                    <Message.Content>
                        <Message.Header as="h3">Inventory not tracked</Message.Header>
                        Stock availability unknown.
                    </Message.Content>
                </Message>
            );
        } else if (trackingType === "QuantityTracked") {
            return (
                <Message icon color={color}>
                    <Icon name="check circle" />
                    <Message.Content>
                        {alertLabel}
                        <Message.Header as="h2">Serial Number: {this.props.pickingHint.inventoryItem.serialNumber}</Message.Header>
                        <Message.Header as="h2">Quantity Remaining: {this.props.pickingHint.inventoryItem.quantity}</Message.Header>
                    </Message.Content>
                </Message>
            );
        } else {
            return (
                <Message icon warning color={color}>
                    <Message.Content>
                        {alertLabel}
                        {this.props.pickingHint.ipd && <Message.Header as="h1" style={{ fontSize: "6em" }}>IPD:&nbsp;{this.props.pickingHint.ipd}</Message.Header>}
                        <Message.Header as="h2">Serial Number: {this.props.pickingHint.serialNumber}</Message.Header>
                    </Message.Content>
                </Message>
            );
        }
    }
}