import React, {
    useEffect,
    useState,
    type Dispatch,
    type SetStateAction,
} from 'react';
import { Alert, GridTable } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import { useRunControllerList } from 'src/apollo/queries/run-controller';
import { RunControllerListColumns } from 'src/components/run-controllers-list/run-controller-list-columns';
import { RunControllerFormModal } from 'src/components/run-controllers-list/run-controller-form-modal';
import { DEFAULT_ITEMS_PER_PAGE, DEFAULT_NO_RESULTS_MSG } from 'src/constants';
import './styles.scss';

interface RunControllerListPropTypes {
    isModalOpen: boolean;
    setIsModalOpen: Dispatch<SetStateAction<boolean>>;
}

const RunControllerList: React.FC<RunControllerListPropTypes> = ({
    isModalOpen,
    setIsModalOpen,
}) => {
    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);
    const [requestParams, setRequestParams] = useState<{
        limit: number;
        offset: number;
    }>({
        limit: DEFAULT_ITEMS_PER_PAGE,
        offset: 0,
    });

    useEffect(() => {
        setRequestParams({
            ...requestParams,
            limit: pageSize,
            offset: page * pageSize,
        });
    }, [page, pageSize]);

    const { data, error, loading, refetch } =
        useRunControllerList(requestParams);

    const refetchCurrentPage = () => {
        const variables = {
            limit: DEFAULT_ITEMS_PER_PAGE,
            offset: page * pageSize,
        };
        return refetch(variables);
    };

    return (
        <Page.Grid className="RunControllersPageGrid">
            <Page.Col>
                {error && <Alert variant="error" text={error.message} />}
            </Page.Col>
            <Page.Col>
                <GridTable
                    bordered
                    columnDefs={RunControllerListColumns()}
                    data={data?.abacusRunControllers?.items || []}
                    emptyStateTitle={DEFAULT_NO_RESULTS_MSG}
                    emptyStateIcon={<Illustration name="noResults" />}
                    loading={loading}
                    loadingRows={DEFAULT_ITEMS_PER_PAGE}
                    page={page}
                    pageSize={pageSize}
                    paginated
                    onPageChange={setPage}
                    onPageSizeChange={setPageSize}
                    rowKey="runControllerId"
                    showUpdateIndicator
                    testId="RunControllersGridTable"
                    totalCount={data?.abacusRunControllers?.totalCount || 0}
                    variant="zebra"
                />
            </Page.Col>
            <Page.Col>
                <RunControllerFormModal
                    isRunControllerFormModalOpen={isModalOpen}
                    onRequestCloseModal={() => {
                        setIsModalOpen(false);
                        refetchCurrentPage();
                    }}
                />
            </Page.Col>
        </Page.Grid>
    );
};

export default RunControllerList;