import React from 'react';
import { fromUnixTime, formatDistanceToNow } from "date-fns";
import { formatInTimeZone } from 'date-fns-tz';
import superagent from 'superagent';

import * as ApiUtils from '../CloudApi/ApiUtils.js';
import constants, { DEFAULT_TIMEZONE } from '../CloudApi/Constants.js';
import BigShipperWrapper from './BigShipperWrapper.jsx';
import { Table, Statistic, Label } from 'semantic-ui-react'

export default class BigShipmentsTable extends React.Component {
    render() {
        return (
            <Table celled>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>ID</Table.HeaderCell>
                        <Table.HeaderCell>Big Order</Table.HeaderCell>
                        <Table.HeaderCell>Item Status</Table.HeaderCell>
                        <Table.HeaderCell>Tracking Number</Table.HeaderCell>
                        <Table.HeaderCell>Created at</Table.HeaderCell>
                        <Table.HeaderCell>Courier</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {this.props.shipments.map((shipment, index) => {
                        let createdAtDateTime = fromUnixTime(shipment.createdAt / 1000);
                        const createdAt = formatInTimeZone(createdAtDateTime, DEFAULT_TIMEZONE, 'PPPp z');
                        const fromNow = formatDistanceToNow(createdAtDateTime, { addSuffix: true });
                        const courier = shipment.currentShippingLabel?.rate?.provider ? shipment.currentShippingLabel.rate.provider : "N/A";
                        const trackingNumber = shipment.currentShippingLabel?.tracking_number || shipment.currentShippingLabel?.trackingNumber;
                        const trackingUrlProvider = shipment.currentShippingLabel?.tracking_url_provider || shipment.currentShippingLabel?.trackingUrlProvider;
                        const uploadLabelUrl = shipment.currentShippingLabel?.upload_label_url || shipment.currentShippingLabel?.uploadLabelUrl;

                        return <Table.Row key={index}>
                            <Table.Cell><a style={{ textDecoration: "underline" }} href={`/shipper/shipment/${shipment.id}`}>{shipment.id}</a></Table.Cell>
                            <Table.Cell><a style={{ textDecoration: "underline" }} href={`/shop/order/${shipment.bigOrderId}`}>{shipment.bigOrderId}</a></Table.Cell>
                            <Table.Cell><Label>{ApiUtils.splitUpperCamelCase(shipment.status)}</Label></Table.Cell>
                            <Table.Cell>
                                {shipment.currentShippingLabel && <a style={{ 'textDecoration': 'underline' }} href={trackingUrlProvider}>{trackingNumber}</a>}
                            </Table.Cell>
                            <Table.Cell>{createdAt} ({fromNow})</Table.Cell>
                            <Table.Cell>{courier}</Table.Cell>
                        </Table.Row>
                    })}
                </Table.Body>
            </Table>
        );
    }
}