import React, { type FC } from 'react';
import { GridTable } from '@theorchard/suite-components';
import { Illustration } from '@theorchard/suite-icons';
import { NrDeliveryOrdersOrderBy } from 'src/data/globalTypes';
import { type DeliveryOrders } from 'src/data/queries';
import {
    DateCell,
    TextCell,
    DownloadFileCell,
    OrderIdLinkCell,
    TimeDateCell,
} from 'src/tableCells';
import { type SortBy } from 'src/types';
import { TRANSLATION_KEY } from '../constants';

export const CLASSNAME = 'OrdersTable';

interface Props {
    orders: DeliveryOrders[];
    totalOrders?: number;
    loading: boolean;
    onSort: (sortBy: SortBy[]) => void;
    sortBy: SortBy;
    onClearFilters: () => void;
    filtersApplied: boolean;
    page: number;
    pageSize: number;
    handlePageChange: (page: number) => void;
    handlePageSizeChange: (pageSize: number) => void;
}

const OrdersTable: FC<Props> = ({
    orders,
    totalOrders,
    loading,
    onSort,
    sortBy,
    onClearFilters,
    filtersApplied,
    page,
    pageSize,
    handlePageChange,
    handlePageSizeChange,
}) => (
    <GridTable
        className={CLASSNAME}
        data={orders}
        loading={loading}
        onSort={onSort}
        sortBy={sortBy}
        bordered
        emptyStateIcon={() => <Illustration name="noResults" />}
        emptyStateTitle={$t(`${TRANSLATION_KEY}.noOrders`)}
        emptyStateBody={$t(`${TRANSLATION_KEY}.adjustFilters`)}
        rowKey={(row: DeliveryOrders) => row.orderId}
        paginated
        totalCount={totalOrders}
        page={page}
        pageSize={pageSize}
        onPageChange={handlePageChange}
        onPageSizeChange={handlePageSizeChange}
        onClearFilters={onClearFilters}
        showClearFilters={filtersApplied}
        showUpdateIndicator
    >
        <GridTable.Column
            className={`${CLASSNAME}-cell-orderId`}
            name="orderId"
            title={$t(`${TRANSLATION_KEY}.orderId`)}
            sortable
            sortKey={NrDeliveryOrdersOrderBy.ID}
            defaultSortDirection="desc"
            fixed
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-cmo`}
            name="cmo"
            title={$t(`${TRANSLATION_KEY}.serviceName`)}
            sortable={false}
            Cell={TextCell}
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-jobs`}
            name="numberOfJobs"
            title={$t(`${TRANSLATION_KEY}.numberOfJobs`)}
            sortable={false}
            Cell={OrderIdLinkCell}
            maxWidth="90px"
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-redeliver`}
            name="reDeliver"
            title={$t(`${TRANSLATION_KEY}.reDelivery`)}
            sortable={false}
            maxWidth="110px"
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-createdAt`}
            name="createdAt"
            title={$t(`${TRANSLATION_KEY}.createdAt`)}
            Cell={TimeDateCell}
            sortable
            sortKey={NrDeliveryOrdersOrderBy.CREATED_AT}
            defaultSortDirection="desc"
            maxWidth="110px"
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-createdBy`}
            name="createdBy"
            title={$t(`${TRANSLATION_KEY}.createdBy`)}
            Cell={TextCell}
            sortable={false}
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-outputFile`}
            name="outputFile"
            title={$t(`${TRANSLATION_KEY}.deliveryFile`)}
            Cell={DownloadFileCell}
            sortable={false}
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-lastUpdated`}
            name="lastUpdated"
            title={$t(`${TRANSLATION_KEY}.lastUpdated`)}
            Cell={DateCell}
            sortable
            sortKey={NrDeliveryOrdersOrderBy.LAST_UPDATED}
            defaultSortDirection="desc"
            maxWidth="110px"
        />
    </GridTable>
);

export default OrdersTable;