import React, { useContext, useEffect, useState } from 'react';

export interface IPagingContextProps {
  dataSource: any[];
  pageSize?: number;
  pageNumber?: number;
  defaultPage?: number;
  setDataSource?(list: any): void;
  setPageSize?(pageSize: number): void;
  setPageNumber?(pageNumber: number): void;
  onPageChange?(pageNumber: number): void;
}

export const PagingContext = React.createContext<Partial<IPagingContextProps>>({});

export const PagingProvider: React.FC<IPagingContextProps> = (props) => {
  const initialState: IPagingContextProps = {
    dataSource: [],
    pageSize: props.pageSize,
    pageNumber: props.defaultPage ? props.defaultPage : 1,
    setDataSource(list) {
      setState((prevState) => ({ ...prevState, dataSource: list }));
    },
    setPageSize(int) {
      setState((prevState) => ({ ...prevState, pageSize: int }));
    },
    setPageNumber(int) {
      setState((prevState) => ({ ...prevState, pageNumber: int }));
    },
    onPageChange: props.onPageChange,
  };

  const [state, setState] = useState(initialState);

  useEffect(() => {
    initialState.setDataSource(props.dataSource);
  }, [props.dataSource]);

  return <PagingContext.Provider value={state}>{props.children}</PagingContext.Provider>;
};

export function usePagingContext() {
  const context = useContext(PagingContext);
  return context;
}

export default PagingContext;