import React, { useEffect, useState } from 'react';
import { useReactiveVar } from '@apollo/client';
import { Pagination } from '@theorchard/suite-components';
import paginationStateVar from 'src/apollo/reactive-vars/tables-state';
import { DEFAULT_ITEMS_PER_PAGE } from 'src/constants';

export interface PaginationPropType {
    fetchMore(vars: { variables: { offset: number; limit: number } }): void;
    itemsPerPage?: number;
    totalItemCount: number;
    tableId: string;
}

const usePagination = ({
    fetchMore,
    itemsPerPage = DEFAULT_ITEMS_PER_PAGE,
    totalItemCount,
    tableId,
}: PaginationPropType) => {
    const paginationState: any = useReactiveVar(paginationStateVar);
    const [pageSize, setPageSize] = useState(itemsPerPage);
    const calculateStart = (newPageNumber: number) => newPageNumber * pageSize;
    const calculateTotalPages = () =>
        Math.max(1, Math.ceil(totalItemCount / pageSize));

    useEffect(() => {
        if (!paginationState[tableId])
            paginationStateVar({ ...paginationState, [tableId]: 1 });
    }, [tableId, totalItemCount]);

    useEffect(() => {
        fetchMore({
            variables: { offset: 0, limit: pageSize },
        });
        paginationStateVar({ ...paginationState, [tableId]: 1 });
    }, [pageSize]);

    const onPageChangeHandler = (pageNumber: number) => {
        paginationStateVar({
            ...paginationState,
            [tableId]: pageNumber + 1,
        });
        fetchMore({
            variables: { offset: calculateStart(pageNumber), limit: pageSize },
        });
    };

    const renderPagination = () =>
        totalItemCount > itemsPerPage &&
        calculateTotalPages() >= paginationState[tableId] && (
            <div
                className="pagination-links"
                data-testid="paginationLinksTestid"
            >
                <Pagination
                    totalCount={totalItemCount}
                    currentPage={paginationState[tableId] - 1}
                    pageSize={pageSize}
                    onChange={onPageChangeHandler}
                    onSetPageSize={setPageSize}
                    variant="expanded"
                />
            </div>
        );

    return { renderPagination };
};

export default usePagination;