import React, { type FC } from 'react';
import { GridTable } from '@theorchard/suite-components';
import { Illustration } from '@theorchard/suite-icons';
import { NrDeliveryQueueOrderBy } from 'src/data/globalTypes';
import { type DeliveryQueueItem } from 'src/data/queries';
import {
    DateCell,
    SoundRecordingLinkCell,
    StatusCell,
    TextCell,
} from 'src/tableCells';
import { type SortBy } from 'src/types';
import { TRANSLATION_KEY } from './constants';

export const CLASSNAME = 'QueueTable';

interface Props {
    total?: number;
    queueItems: DeliveryQueueItem[];
    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 QueueTable: FC<Props> = ({
    total,
    queueItems,
    loading,
    onSort,
    sortBy,
    onClearFilters,
    filtersApplied,
    page,
    pageSize,
    handlePageChange,
    handlePageSizeChange,
}) => (
    <GridTable
        className={CLASSNAME}
        data={queueItems}
        loading={loading}
        onSort={onSort}
        sortBy={sortBy}
        bordered
        emptyStateIcon={() => <Illustration name="noResults" />}
        emptyStateTitle={$t(`${TRANSLATION_KEY}.noQueueItems`)}
        rowKey={(row: DeliveryQueueItem) =>
            `${row.contributionId}-${row.contributorId}-${row.deliveryStoreId}`
        }
        paginated
        totalCount={total}
        page={page}
        pageSize={pageSize}
        onPageChange={handlePageChange}
        onPageSizeChange={handlePageSizeChange}
        onClearFilters={onClearFilters}
        showClearFilters={filtersApplied}
        showUpdateIndicator
    >
        <GridTable.Column
            className={`${CLASSNAME}-cell-store`}
            name="deliveryStoreName"
            title={$t(`${TRANSLATION_KEY}.deliveryStore`)}
            sortable={false}
            fixed
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-contributor`}
            name="contributorName"
            title={$t(`${TRANSLATION_KEY}.contributorLegalName`)}
            sortable={false}
            Cell={TextCell}
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-soundRec`}
            name="soundRecordingTitle"
            title={$t(`${TRANSLATION_KEY}.soundRec`)}
            sortable={false}
            Cell={SoundRecordingLinkCell}
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-soundRecId`}
            name="soundRecordingId"
            title={$t(`${TRANSLATION_KEY}.soundRecId`)}
            sortable={false}
            Cell={TextCell}
            minWidth="100px"
            maxWidth="1fr"
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-type`}
            name="contributorRelationship"
            title={$t(`${TRANSLATION_KEY}.type`)}
            sortable={false}
            Cell={TextCell}
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-status`}
            name="statusAtStore"
            title={$t(`${TRANSLATION_KEY}.storeStatus`)}
            sortable={false}
            Cell={StatusCell}
        />
        <GridTable.Column
            className={`${CLASSNAME}-cell-updated`}
            name="lastUpdatedAt"
            title={$t(`${TRANSLATION_KEY}.updated`)}
            sortable
            sortKey={NrDeliveryQueueOrderBy.LAST_UPDATED}
            defaultSortDirection="desc"
            Cell={DateCell}
        />
    </GridTable>
);

export default QueueTable;