import { EExploreFilter } from '@src/constants/Enums';
import { ICollection, INFT } from 'metarare';
import { useEffect, useState } from 'react';
import useResize from './useResize';

interface IOwnProps {
  list: INFT[] | ICollection[];
  dispatchFnc: (offset: number, limit: number) => void;
  setSelectedFilterType?: (type: EExploreFilter | '') => void;
}
const useMore = ({ list, dispatchFnc, setSelectedFilterType }: IOwnProps) => {
  const { isMobileSize } = useResize();
  const defaultDisplayCnt = isMobileSize ? 6 : 25;
  const moreCnt = 25;
  const [offset, setOffset] = useState<number>(list.length);
  const [limit, setLimit] = useState<number>(defaultDisplayCnt);
  const [showMore, setShowMore] = useState<boolean>(false);

  const onClickMore = () => {
    setOffset(list.length);
    setLimit(moreCnt);
    dispatchFnc(list.length, moreCnt);
    setSelectedFilterType?.('');
  };

  useEffect(() => {
    setShowMore(offset + limit <= list.length);
  }, [list, offset, limit]);

  const resetPagination = () => {
    setOffset(0);
    setLimit(defaultDisplayCnt);
  };

  return {
    offset,
    limit,
    onClickMore,
    showMore,
    resetPagination,
    defaultDisplayCnt
  };
};

export default useMore;
