import type { FC } from 'react';
import React from 'react';
import { GridTable } from '@theorchard/suite-components';
import { Illustration } from '@theorchard/suite-icons';
import {
    DeliveryFileStatusCell,
    TimeDateCell,
    StoreTerritoryCell,
    CreatedByCell,
    OrderIdLinkCell,
    DownloadFileButtonCell,
} from 'src/components/tableCells';
import { OwnershipNrDeliveryOrdersOrderBy } from 'src/data/globalTypes';
import { TRANSLATION_KEY } from '../constants';
import GridTableWrapper from './gridTableWrapper';
import type { OwnershipDeliveryOrder } from 'src/data/queries';
import type { SortBy } from 'src/types';

export const CLASS_NAME = 'OrdersTable';

interface Props {
    orders: OwnershipDeliveryOrder[];
    totalCount: number;
    loading: boolean;
    sortBy: SortBy;
    pageSize: number;
    page: number;
    handlePageChange: (newPageNumber: number) => void;
    handlePageSizeChange: (newPageSize: number) => void;
    onClearFilters: () => void;
    onSort: (sortBy: SortBy[]) => void;
    filtersApplied: boolean;
}

const OrdersTable: FC<Props> = ({
    orders,
    totalCount,
    loading,
    sortBy,
    page,
    pageSize,
    handlePageChange,
    handlePageSizeChange,
    onClearFilters,
    onSort,
    filtersApplied,
}) => (
    <GridTableWrapper>
        <GridTable
            className={`${CLASS_NAME}-grid-table`}
            variant="zebra"
            name="orders"
            rowKey="id"
            data={orders}
            loading={loading}
            onSort={onSort}
            sortBy={sortBy}
            emptyStateIcon={() => <Illustration name="noResults" />}
            emptyStateTitle={$t(`${TRANSLATION_KEY}.noOrders`)}
            paginated
            totalCount={totalCount}
            page={page}
            pageSize={pageSize}
            onPageChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
            onClearFilters={onClearFilters}
            showClearFilters={filtersApplied}
        >
            <GridTable.Column
                className={`${CLASS_NAME}-cell-orderId`}
                name="id"
                title={$t(`${TRANSLATION_KEY}.orderId`)}
                sortable
                fixed
                align="right"
                minWidth="100px"
                maxWidth="100px"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-cmo`}
                name="cmm.name"
                title={$t(`${TRANSLATION_KEY}.serviceName`)}
                maxWidth="180px"
                minWidth="180px"
                Cell={StoreTerritoryCell}
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-number-of-jobs`}
                name="jobCount"
                title={$t(`${TRANSLATION_KEY}.numberOfJobs`)}
                Cell={OrderIdLinkCell}
                sortable={false}
                minWidth="140px"
                maxWidth="140px"
                align="right"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-deliveryFileState`}
                name="deliveryFileState"
                title={$t(`${TRANSLATION_KEY}.deliveryFileState`)}
                Cell={DeliveryFileStatusCell}
                maxWidth="180px"
                minWidth="180px"
                sortable={false}
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-createdAt`}
                name="createdAt"
                title={$t(`${TRANSLATION_KEY}.createdAt`)}
                Cell={TimeDateCell}
                sortable
                sortKey={OwnershipNrDeliveryOrdersOrderBy.CREATED_AT}
                defaultSortDirection="desc"
                align="right"
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-createdBy`}
                name="createdBy"
                title={$t(`${TRANSLATION_KEY}.createdBy`)}
                Cell={CreatedByCell}
            />
            <GridTable.Column
                className={`${CLASS_NAME}-cell-downloadFileUrl`}
                name="downloadFileUrl"
                title={$t(`${TRANSLATION_KEY}.actions`)}
                Cell={DownloadFileButtonCell}
                maxWidth="120px"
                minWidth="120px"
                align="center"
            />
        </GridTable>
    </GridTableWrapper>
);

export default OrdersTable;