import type { FC } from 'react';
import React from 'react';
import { GridTable } from '@theorchard/suite-components';
import { Illustration } from '@theorchard/suite-icons';
import { PhysicalDeliveryOrderBy } from 'src/data/globalTypes';
import { TRANSLATION_KEY } from 'src/pages/monitorPage/constants';
import {
    DateCell,
    DeliveryFulfilledDateCell,
    DeliveryFulfilledTextCell,
    TextCell,
} from 'src/tableCells';
import type { DeliveryProducts } from 'src/data/queries';
import type { SortBy } from 'src/types';

export const CLASSNAME = 'ProductsTable';

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

const ProductsTable: FC<Props> = ({
    products,
    totalProducts,
    loading,
    onClearFilters,
    filtersApplied,
    onSort,
    sortBy,
    page,
    pageSize,
    handlePageChange,
    handlePageSizeChange,
}) => {
    const emptyFiltersComponent = (
        <div className={`${CLASSNAME}-empty`}>
            <span className={`${CLASSNAME}-empty-title`}>
                {$t(`${TRANSLATION_KEY}.noProductsTitle`)}
            </span>
            <span className={`${CLASSNAME}-empty-body`}>
                {$t(`${TRANSLATION_KEY}.noProductsBody`)}
            </span>
        </div>
    );

    return (
        <GridTable
            className={CLASSNAME}
            data={products}
            loading={loading}
            bordered
            emptyStateComponent={filtersApplied ? null : emptyFiltersComponent}
            emptyStateIcon={() => <Illustration name="noResults" />}
            emptyStateTitle={$t(`${TRANSLATION_KEY}.noProducts`)}
            onSort={onSort}
            sortBy={sortBy}
            paginated
            totalCount={totalProducts}
            page={page}
            pageSize={pageSize}
            onPageChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
            onClearFilters={onClearFilters}
            showClearFilters={filtersApplied}
            showUpdateIndicator
        >
            <GridTable.Column
                className={`${CLASSNAME}-cell-name`}
                name="productName"
                title={$t(`${TRANSLATION_KEY}.productName`)}
                Cell={TextCell}
            />
            <GridTable.Column
                className={`${CLASSNAME}-cell-orderId`}
                name="orderId"
                title={$t(`${TRANSLATION_KEY}.orderId`)}
                fixed
            />
            <GridTable.Column
                className={`${CLASSNAME}-cell-store`}
                name="store"
                title={$t(`${TRANSLATION_KEY}.serviceName`)}
                Cell={TextCell}
            />
            <GridTable.Column
                className={`${CLASSNAME}-cell-status`}
                name="orderDeliveryStatus"
                title={$t(`${TRANSLATION_KEY}.productGenerationStatus`)}
                Cell={TextCell}
            />
            <GridTable.Column
                className={`${CLASSNAME}-cell-lastUpdated`}
                name="lastUpdated"
                title={$t(`${TRANSLATION_KEY}.lastUpdatedAt`)}
                Cell={DeliveryFulfilledDateCell}
                sortable
                sortKey={PhysicalDeliveryOrderBy.LAST_UPDATED}
                maxWidth="110px"
            />
            <GridTable.Column
                className={`${CLASSNAME}-cell-lastUpdated`}
                name="lastUpdatedBy"
                title={$t(`${TRANSLATION_KEY}.lastUpdatedBy`)}
                Cell={DeliveryFulfilledTextCell}
                maxWidth="110px"
            />
            <GridTable.Column
                className={`${CLASSNAME}-cell-createdAt`}
                name="createdAt"
                title={$t(`${TRANSLATION_KEY}.createdAt`)}
                Cell={DateCell}
                sortable
                sortKey={PhysicalDeliveryOrderBy.CREATED_AT}
                maxWidth="110px"
            />
            <GridTable.Column
                className={`${CLASSNAME}-cell-createdBy`}
                name="createdBy"
                title={$t(`${TRANSLATION_KEY}.createdBy`)}
                Cell={TextCell}
            />
        </GridTable>
    );
};

export default ProductsTable;