import React, { createContext, useContext, useRef } from 'react';
import { object, node, bool } from 'prop-types';
import useUpdateEffect from '../../hooks/useUpdateEffect';

const PaginationContext = createContext(null);

const usePaginationContext = () => useContext(PaginationContext);

const PaginationProvider = ({ pagination, children }) => (
  <PaginationContext.Provider value={pagination}>{children}</PaginationContext.Provider>
);

PaginationProvider.propTypes = {
  pagination: object.isRequired,
  children: node.isRequired,
};

const PaginatedContent = ({ children, scrollToTop }) => {
  const pagination = usePaginationContext();
  const ref = useRef();

  useUpdateEffect(() => {
    if (scrollToTop) {
      ref.current.scrollIntoView();
    }
  }, [pagination.page]);

  return <div ref={ref}>{children}</div>;
};

PaginatedContent.propTypes = {
  children: node.isRequired,
  scrollToTop: bool,
};

const PaginationContainer = ({ pagination, children, scrollToTop }) => {
  return (
    <PaginationProvider pagination={pagination}>
      <PaginatedContent scrollToTop={scrollToTop}>{children}</PaginatedContent>
    </PaginationProvider>
  );
};

PaginationContainer.propTypes = {
  pagination: object.isRequired,
  children: node.isRequired,
  scrollToTop: bool,
};

export { PaginationContainer, usePaginationContext, PaginationProvider, PaginatedContent };