import React from 'react';
import superagent from 'superagent';
import { Table, Statistic, Button, Header, Segment, Icon, Flag, Grid } from 'semantic-ui-react'

import * as ApiUtils from '../CloudApi/ApiUtils.js';
import InventoryWrapper from './InventoryWrapper.jsx';

class BigInventoryCompactReport extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
    }

    async componentDidMount() {
        this.setState({ loading: true });
        let res = await superagent.get(`/api/admin/inventory/items?serialNumberLike=BS1${this.props.ipd}&type=${this.props.productType}&status=InStock&limit=1`);
        this.setState({ count: res.body.count, loading: false });
    }

    render() {
        let header, button;

        header = <Header as="h3">{this.state.count}x {this.props.productType} in stock</Header>;
        button = <Button fluid size="small" color="green" href={`/inventory?serialNumberLike=BS1${this.props.ipd}&type=${this.props.productType}&status=InStock`}>
            View IPD {this.props.ipd} {this.props.productName}
        </Button>;

        return (
            <Table.Row positive={this.state.count > 0} negative={this.state.loading}>
                <Table.Cell> {this.props.ipd}</Table.Cell>
                <Table.Cell>{this.state.loading ? <Icon loading name='spinner' /> : <>{this.props.productType}</>}</Table.Cell>
                <Table.Cell>
                    {this.state.loading ? <Icon loading name='refresh' /> :
                        <Statistic size="mini">
                            <Statistic.Value>{this.state.count}</Statistic.Value>
                        </Statistic>
                    }
                </Table.Cell>
                <Table.Cell>
                    <a style={{ textDecoration: "underline" }} href={`/inventory?serialNumberLike=BS1${this.props.ipd}&type=${this.props.productType}&status=InStock`}>View Inventory...</a>
                </Table.Cell>
            </Table.Row>
        )
    }
}

export default class BigInventoryReport extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bigOrder: null
        };
    }

    async componentDidMount() {
    }

    render() {
        const beyondTable = (
            <Table celled>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>IPD</Table.HeaderCell>
                        <Table.HeaderCell>Product</Table.HeaderCell>
                        <Table.HeaderCell>Count</Table.HeaderCell>
                        <Table.HeaderCell>View</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {_.range(55, 73).map(ipd => {
                        return <BigInventoryCompactReport ipd={ipd} productType="BigscreenBeyondV1" />
                    })}
                </Table.Body>
            </Table>
        );

        const replacementBeyondTable = (
            <Table celled>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>IPD</Table.HeaderCell>
                        <Table.HeaderCell>Product</Table.HeaderCell>
                        <Table.HeaderCell>Count</Table.HeaderCell>
                        <Table.HeaderCell>View</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {_.range(55, 73).map(ipd => {
                        return <BigInventoryCompactReport ipd={ipd} productType="ReplacementBigscreenBeyondV1" />
                    })}
                </Table.Body>
            </Table>
        );



        return (
            <InventoryWrapper title="Inventory Report">
                {beyondTable}
                {replacementBeyondTable}
            </InventoryWrapper>
        );
    }
}