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 BigOrdersWrapper from './BigOrdersWrapper.jsx';
import BigOrdersQuery from './BigOrdersQuery.jsx';

class BigOrderCompactReport extends React.Component {
    render() {
        const ipd = this.props.data["ipd"];
        const count = this.props.data["Count"];
        return (
            <Table.Row positive={count > 0} negative={count == 0}>
                <Table.Cell> {ipd}</Table.Cell>
                <Table.Cell>
                    <Statistic size="mini">
                        <Statistic.Value>{count}</Statistic.Value>
                    </Statistic>
                </Table.Cell>
                <Table.Cell>
                    <a style={{ textDecoration: "underline" }} href={`/shop/orders?ipd=${ipd}&state=WaitingForInventory&origin=Shopify`}>View Orders...</a>
                </Table.Cell>
            </Table.Row>
        )
    }
}

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

    async componentDidMount() {
        try {
            let schemas = await ApiUtils.getFabricatorSchemas();
            this.setState({ schemas });
        } catch (e) {
            console.log(e);
        }

        const res = await superagent.get(`/api/admin/shop/orders/report2?groupBy=ipd&orderBy=ipd&origin=Shopify&state=WaitingForInventory`);
        console.log(res.body);
        this.setState({ items: res.body.items, count: res.body.count });

    }

    async onUpdateQuery(params) {
        this.setState({ loading: true, count: undefined });
        try {
            const res = await superagent.get(`/api/admin/shop/orders/report2?${params.toString()}&groupBy=ipd&orderBy=ipd`);
            this.setState({ items: res.body.items, count: res.body.count });
        } catch (e) {
            this.setState({ error: e });
        }
        this.setState({ loading: false });
    }

    render() {
        if (!this.state.schemas) return null;
        return (
            <BigOrdersWrapper title="Orders Report" loading={this.state.loading}>
                <BigOrdersQuery schemas={this.state.schemas} onQueryUpdated={this.onUpdateQuery.bind(this)} loading={this.state.loading} />
                {this.state.items && <Table celled>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell>IPD</Table.HeaderCell>
                            <Table.HeaderCell>Count</Table.HeaderCell>
                            <Table.HeaderCell>View</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                        {this.state.items.map(data => {
                            return <BigOrderCompactReport data={data} />
                        })}
                    </Table.Body>
                </Table>}
            </BigOrdersWrapper>
        );
    }
}