import React, { Dispatch, SetStateAction, useMemo } from 'react';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import { GridTable, Section } from '@theorchard/suite-components';
import { DEFAULT_ITEMS_PER_PAGE } from 'src/constants';
import { Illustration } from '@theorchard/suite-icons';
import { BulkEditEntryBase } from 'src/components/contract-bulk-edit/common/edit-schema/common-bulk-edit-schema';

export interface EntityBulkEditTablePropTypes {
    bulkEditEntriesList: BulkEditEntryBase[] | [];
    columns: GridTableColumnDefinition[];
    entityName: string;
    isLoading: boolean;
    hasFilterApplied: boolean;
    onClearFilters: () => void;
    page: number;
    setPage: Dispatch<SetStateAction<number>>;
    pageSize: number;
    setPageSize: Dispatch<SetStateAction<number>>;
}

const EntityBulkEditGridTable: React.FC<EntityBulkEditTablePropTypes> = ({
    bulkEditEntriesList,
    columns,
    entityName,
    isLoading,
    hasFilterApplied,
    onClearFilters,
    page,
    setPage,
    pageSize,
    setPageSize,
}) => {
    const columnDefs = columns;
    const variant = 'zebra';

    const pageData = useMemo(() => {
        if (isLoading) return [];
        const safePageSize = Math.max(1, pageSize || 1);
        const safePage = Math.max(0, page || 0);
        const start = safePage * safePageSize;
        const end = start + safePageSize;
        return (bulkEditEntriesList || []).slice(start, end);
    }, [bulkEditEntriesList, isLoading, page, pageSize]);

    return (
        <GridTable
            name={entityName}
            bordered
            columnDefs={columnDefs}
            data={pageData}
            emptyStateIcon={<Illustration name="noResults" />}
            loading={isLoading}
            loadingRows={DEFAULT_ITEMS_PER_PAGE}
            page={page}
            pageSize={pageSize}
            paginated
            onClearFilters={onClearFilters}
            onPageChange={setPage}
            onPageSizeChange={setPageSize}
            showClearFilters={hasFilterApplied}
            showUpdateIndicator
            stickyHeader
            totalCount={bulkEditEntriesList.length}
            rowKey={columns[0].name}
            variant={variant}
        />
    );
};

export const EntityBulkEditTable: React.FC<
    EntityBulkEditTablePropTypes
> = props => {
    return (
        <Section>
            <Section.Body testId="sectionBody">
                <Section.Table testId="sectionTable">
                    <EntityBulkEditGridTable {...props} />
                </Section.Table>
            </Section.Body>
        </Section>
    );
};