import React from 'react';
import { Segment, Table } from 'semantic-ui-react';

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

export default class BigProductCustomsInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            schemas: null
        };
    }

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

    render() {
        const { schemas, loading } = this.state;

        if (loading) {
            return (
                <InventoryWrapper title="Product Customs Info" loading={true}>
                    <Segment basic loading={true} />
                </InventoryWrapper>
            );
        }

        const customsInfo = schemas?.BigProductTypeCustomsInfo || {};
        const productTypes = Object.keys(customsInfo).sort();

        return (
            <InventoryWrapper title="Product Customs Info">
                <Table celled striped>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell>Product Type</Table.HeaderCell>
                            <Table.HeaderCell>Tariff Number</Table.HeaderCell>
                            <Table.HeaderCell>Description</Table.HeaderCell>
                            <Table.HeaderCell>Weight</Table.HeaderCell>
                            <Table.HeaderCell>Mass Unit</Table.HeaderCell>
                            <Table.HeaderCell>Default Value</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    <Table.Body>
                        {productTypes.map(productType => {
                            const info = customsInfo[productType];
                            return (
                                <Table.Row key={productType}>
                                    <Table.Cell><strong>{productType}</strong></Table.Cell>
                                    <Table.Cell>{info.tariffNumber}</Table.Cell>
                                    <Table.Cell>{info.description}</Table.Cell>
                                    <Table.Cell>{info.weight}</Table.Cell>
                                    <Table.Cell>{info.massUnit}</Table.Cell>
                                    <Table.Cell>${info.defaultValue.toFixed(2)}</Table.Cell>
                                </Table.Row>
                            );
                        })}
                    </Table.Body>
                </Table>

                {productTypes.length === 0 && (
                    <Segment>
                        <p>No customs information available.</p>
                    </Segment>
                )}
            </InventoryWrapper>
        );
    }
}