import React, { useEffect, useState } from 'react';
import { Pagination } from '@orchard/frontend-react-components';

type UsePaginationArgs = {
    fetchMore(vars: { variables: { offset: number, limit: number } }): void,
    itemsPerPage: number,
    totalItemCount: number
};

const usePagination = ({
    fetchMore,
    itemsPerPage,
    totalItemCount
}: UsePaginationArgs) => {
    const [currentPage, setCurrentPage] = useState(1);

    const calculateStart = (newPageNumber: number) => ((newPageNumber - 1) * itemsPerPage);
    const calculateTotalPages = () => Math.max(1, Math.ceil(totalItemCount / itemsPerPage));

    const onPageChangeHandler = (pageNumber: number) => {
        setCurrentPage(pageNumber);
        fetchMore({
            variables: { offset: calculateStart(pageNumber), limit: itemsPerPage }
        });
    };

    const resetPaging = () => setCurrentPage(1);

    useEffect(() => {
        const totalPages = calculateTotalPages();
        if (totalPages < currentPage)
            onPageChangeHandler(totalPages);
    }, [totalItemCount]); // eslint-disable-line

    const renderPagination = () => (
        totalItemCount > itemsPerPage && calculateTotalPages() >= currentPage && (
            <div className="pagination-links">
                <Pagination
                    currentPage={ currentPage }
                    onChange={ onPageChangeHandler }
                    totalPages={ calculateTotalPages() }
                />
            </div>
        )
    );

    return { renderPagination, resetPaging };
};

export default usePagination;