import React, { useRef } from 'react';
import superagent from 'superagent';
import { Message, Segment, Grid, Header, Icon, Button, Table, Form, Divider, Label, Transition } from 'semantic-ui-react'

import * as ApiUtils from '../CloudApi/ApiUtils.js';
import BigApiErrorMessage from '../CloudApi/BigApiErrorMessage.jsx';
import HandScannerInput from '../Util/HandScannerInput.jsx';
import InventoryWrapper from './InventoryWrapper.jsx';
import InventoryItemComponent from './InventoryItemComponent.jsx';

export default class InventoryAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            savedQueries: [],
            newItemSerialNumber: "",
            error: null
        };
    }

    async componentDidMount() {
        this.setState({ menuLoading: true });

        let schemas = await ApiUtils.getFabricatorSchemas();
        this.setState({ schemas });
    }

    async onCreateBigInventoryItem() {
        try {
            const res = await superagent.post(`/api/admin/inventory/item`).send({
                serialNumber: this.state.serialNumber,
                trackingType: "QuantityTracked",
                productType: this.state.productType,
                quantity: this.state.quantity || 0
            });
            window.location.href = `/inventory/item/${res.body.id}`;
        } catch (e) {
            console.log(e);
            this.setState({ error: ex.response });
        }

    }

    onChange(e, { name, value }) {
        this.setState({ [name]: value })
    }

    onDismissMessage(e) {
        this.setState({ message: null });
    }

    render() {
        if (!this.state.schemas) {
            return <Segment basic loading={true} />;
        }

        if (this.state.items && this.state.items.length > 0) {
            scannedItem = <div>
                <Message positive icon>
                    <Icon name='check' />
                    <Message.Content>
                        <Message.Header>Item exists!</Message.Header>
                        This item already exists in the inventory.
                    </Message.Content>
                </Message>
            </div>;
        }

        if (this.state.createdInventoryItem) {
            scannedItem = <div>
                <Message positive icon>
                    <Icon name='check' />
                    <Message.Content>
                        <Message.Header>Created!</Message.Header>
                    </Message.Content>
                </Message>
            </div>;
        }

        return (
            <InventoryWrapper title="Add Inventory">
                <Segment basic loading={this.state.loading}>
                    {this.state.message && <Message onDismiss={this.onDismissMessage.bind(this)} positive>{this.state.message}</Message>}
                    <BigApiErrorMessage error={this.state.error} />
                    <Transition visible={!this.state.loading} animation='fade' duration={500}>
                        <div>
                            <Form>
                                <Form.Select
                                    size="tiny"
                                    label='Product Type'
                                    name="productType"
                                    value={this.state.productType}
                                    options={this.state.schemas.BigProductTypeOptions}
                                    onChange={this.onChange.bind(this)}
                                />
                                <Form.Field>
                                    <label>Serial Number Prefix</label>
                                    <Form.Input
                                        width={2}
                                        type="text"
                                        name="serialNumber"
                                        value={this.state.serialNumber}
                                        onChange={this.onChange.bind(this)}
                                        placeholder="Enter serial number"
                                    />
                                </Form.Field>
                                <Form.Field>
                                    <label>Starting Quantity</label>
                                    <Form.Input
                                        width={2}
                                        type="number"
                                        name="quantity"
                                        value={this.state.quantity || 1}
                                        onChange={this.onChange.bind(this)}
                                        placeholder="Enter starting quantity"
                                        />
                                </Form.Field>
                                <Button primary onClick={this.onCreateBigInventoryItem.bind(this)}>Create Item</Button>
                            </Form>
                            {this.state.createdInventoryItem && (
                                <Segment>
                                    <InventoryItemComponent schemas={this.state.schemas} inventoryItem={this.state.createdInventoryItem} />
                                </Segment>
                            )}
                        </div>
                    </Transition>
                </Segment>
            </InventoryWrapper>
        );
    }
}