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 BigShipperWrapper from './BigShipperWrapper.jsx';
import BigShipmentsTable from './BigShipmentsTable.jsx';
import { he } from 'date-fns/locale';

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

    async componentDidMount() {
        this.setState({ loading: true });
        let res;
        if (this.props.countryCode) {
            res = await superagent.get(`/api/admin/shipper/stats?countryCode=${this.props.countryCode}&limit=2&state=WaitingForInventory`);
        } else if (this.props.shopifyProductIds) {
            res = await superagent.get(`/api/admin/shipper/stats?shopifyProductIds=${this.props.shopifyProductIds}&limit=2&state=WaitingForInventory`);
        } else if (this.props.exactShopifyProductIds) {
            res = await superagent.get(`/api/admin/shipper/stats?exactShopifyProductIds=${this.props.exactShopifyProductIds}`);
            console.log(res.body);
        } else {
            res = await superagent.get(`/api/admin/shipper/stats`);
        }
        this.setState({ count: res.body.items.length, loading: false });
    }

    render() {
        let header, button;

        if (this.props.countryCode) {
            header = <Header as="h3"><Flag name={this.props.countryCode.toLowerCase()} />{this.state.count} {this.props.countryCode} orders</Header>;
            button = <Button fluid size="small" color="green" href={`/shipper/next?countryCode=${this.props.countryCode}`}>
                <Flag name={this.props.countryCode.toLowerCase()} />Find Next Order for {this.props.countryCode}
            </Button>;
        } else if (this.props.shopifyProductIds) {
            header = <Header as="h3">{this.state.count} {this.props.productName} orders</Header>;
            button = <Button fluid size="small" color="green" href={`/shipper/next?shopifyProductIds=${this.props.shopifyProductIds}`}>
                Find Next Order with a {this.props.productName}
            </Button>;
        } else if (this.props.exactShopifyProductIds) {
            header = <Header as="h3">{this.state.count} {this.props.productName} orders</Header>;
            button = <Button fluid size="small" color="green" href={`/shipper/next?exactShopifyProductIds=${this.props.exactShopifyProductIds}`}>
                Find Next Order with a {this.props.productName}
            </Button>;
        } else {
            header = <Header as="h3">{this.state.count} orders across all countries</Header>;
            button = <Button fluid size="small" color="green" href={`/shipper/next`}>Find Next Order</Button>;
        }

        return (
            <Grid.Column>
                <Segment loading={this.state.loading}>
                    {header}{button}
                </Segment>
            </Grid.Column>
        )
    }
}

/**
 * HACK HACK HACK
 * 
 * SUPER DUPER SHITTY ESTIMATOR
 */
class BigShipperEstimator extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
    }

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

        const res = await superagent.get(`/api/admin/shipper/stats`);
        this.setState({ estimatedShippableOrderCount : res.body.items.length, loading: false });
    }

    render() {
        return (
            <Grid.Column>
                <Segment loading={this.state.loading}>
                    <Header as="h3">{this.state.loading ? `Estimating total number of shippable orders...` : `${this.state.estimatedShippableOrderCount} Shippable Orders (Approx)`}</Header>
                    <small>Rough estimate - based on current inventory levels.</small>
                </Segment>
            </Grid.Column>
        )
    }
}

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

    async componentDidMount() {
        this.setState({ loading: true });
        const res = await superagent.get(`/api/admin/shipper/shipments?limit=1`);
        this.setState({ items: res.body.items, stats: { statsByType: [{ type: "Items Shipped", count: res.body.count }] }, loading: false });
    }

    render() {
        return (
            <BigShipperWrapper title="Big Shipper">
                <Grid columns={1}>
                    <BigShipperEstimator />
                </Grid>

                <Header as="h3">Shippable orders by single items</Header>

                <Grid columns={3}>
                    <BigShipperCompactForecast exactShopifyProductIds="8346646937817" productName="Replacement Cushion" />
                    <BigShipperCompactForecast shopifyProductIds="9221977440473" productName="Replacement Beyond 2" />
                    <BigShipperCompactForecast exactShopifyProductIds="8100195008729" productName="Audio Strap" />
                </Grid>

                <Grid columns={3}>
                    <BigShipperCompactForecast exactShopifyProductIds="9131345674457" productName="Single Cushion" />
                    <BigShipperCompactForecast exactShopifyProductIds="7761338400985,7761325916377" productName="Lens Inserts" />
                    <BigShipperCompactForecast exactShopifyProductIds="9131615977689" productName="Universal Cushion" />
                </Grid>

                <Header as="h3">Shippable orders by country</Header>

                <Grid columns={3}>
                    <BigShipperCompactForecast countryCode="US" />
                    <BigShipperCompactForecast countryCode="CA" />
                    <BigShipperCompactForecast />
                </Grid>

                <Grid columns={3}>
                    <BigShipperCompactForecast countryCode="NL" />
                    <BigShipperCompactForecast countryCode="DE" />
                    <BigShipperCompactForecast countryCode="GB" />
                </Grid>

                <Grid columns={3}>
                    <BigShipperCompactForecast countryCode="JP" />
                    <BigShipperCompactForecast countryCode="AU" />
                    <BigShipperCompactForecast countryCode="NZ" />
                </Grid>

                <Header as="h3">Big Shipper Stats</Header>
                <Statistic.Group loading={this.state.loading} size="small">
                    {this.state.stats && this.state.stats.statsByType.map((stat, index) => {
                        return <Statistic>
                            <Statistic.Value>
                                {stat.count}</Statistic.Value>
                            <Statistic.Label>{stat.type}</Statistic.Label>
                        </Statistic>
                    })}
                </Statistic.Group>

            </BigShipperWrapper>
        );
    }
}