import React from 'react';
import { GridTable } from '@theorchard/suite-components';
import { useGetBulkSessionIngestionQuery } from 'src/data/queries/getBulkSessionIngestion';
import { OA_PRODUCT_URL } from 'src/constants';
import StatusIndicator from '../statusIndicator';

type Product = {
    productId: string;
    productName: string;
    upc: string;
};

type IngestionProduct = {
    ingestionStatus?: string;
    product?: Product;
};

const IngestionDetails = ({
    bulkSessionIngestionId,
}: {
    bulkSessionIngestionId: string;
}) => {
    const { data, loading } = useGetBulkSessionIngestionQuery({
        id: bulkSessionIngestionId,
    });
    return (
        <div className="IngestionDetails">
            <h3>Products</h3>
            <GridTable
                className="IngestionDetails--products"
                data={data?.products ? data.products : []}
                loading={loading}
            >
                <GridTable.Column<IngestionProduct>
                    title="Ingestion Status"
                    name="ingestionStatus"
                    Cell={({ data: { ingestionStatus } }) => (
                        <StatusIndicator
                            showText={false}
                            status={ingestionStatus}
                        />
                    )}
                    maxWidth="10px"
                />
                <GridTable.Column<IngestionProduct>
                    title="Product ID"
                    name="productId"
                    Cell={({ data: { product } }) => (
                        <a
                            href={`${OA_PRODUCT_URL}?${new URLSearchParams({
                                release_id: String(product?.productId),
                            }).toString()}`}
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            {product?.productId}
                        </a>
                    )}
                />
                <GridTable.Column<IngestionProduct>
                    title="Product Name"
                    name="productName"
                    Cell={({ data: { product } }) => product?.productName}
                />
            </GridTable>
        </div>
    );
};

export default IngestionDetails;