import React, { type Dispatch, type SetStateAction } from 'react';
import { GridTable, Section } from '@theorchard/suite-components';
import { Illustration } from '@theorchard/suite-icons';
import ContractListTableColumns from 'src/components/contract-list/contract-list-table-columns';
import {
    ADJUST_FILTERS_MSG,
    DEFAULT_ITEMS_PER_PAGE,
    DEFAULT_NO_RESULTS_MSG,
    SEARCH_NO_RESULTS_FOUND,
} from 'src/constants';
import type { AbacusContractList } from 'src/types/abacus-contract';

export interface ContractTablePropTypes {
    contractList: AbacusContractList[] | [];
    contractsTotalCount: number;
    isFiltered: boolean;
    isLoading: boolean;
    hasFilterApplied: boolean;
    onClearFilters: () => void;
    page: number;
    setPage: Dispatch<SetStateAction<number>>;
    pageSize: number;
    setPageSize: Dispatch<SetStateAction<number>>;
}

const ContractGridTable: React.FC<ContractTablePropTypes> = ({
    contractList,
    contractsTotalCount,
    isFiltered,
    isLoading,
    hasFilterApplied,
    onClearFilters,
    page,
    setPage,
    pageSize,
    setPageSize,
}) => {
    const columnDefs = ContractListTableColumns();
    const emptyStateTile = isFiltered
        ? SEARCH_NO_RESULTS_FOUND
        : DEFAULT_NO_RESULTS_MSG;
    const emptyStateBody = isFiltered ? ADJUST_FILTERS_MSG : '';
    const variant = 'zebra';

    return (
        <GridTable
            name="Contract"
            bordered
            columnDefs={columnDefs}
            data={isLoading ? [] : contractList}
            emptyStateTitle={emptyStateTile}
            emptyStateIcon={<Illustration name="noResults" />}
            emptyStateBody={emptyStateBody}
            loading={isLoading}
            loadingRows={DEFAULT_ITEMS_PER_PAGE}
            page={page}
            pageSize={pageSize}
            paginated
            onClearFilters={onClearFilters}
            onPageChange={setPage}
            onPageSizeChange={setPageSize}
            showClearFilters={hasFilterApplied}
            showUpdateIndicator
            stickyHeader
            totalCount={contractsTotalCount}
            rowKey="contractId"
            variant={variant}
        />
    );
};

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

export default ContractTable;