import {useInfiniteQuery, useQueryClient} from '@tanstack/react-query';
import {useReady} from '@tarojs/taro';
import {useState, useRef, useLayoutEffect} from 'react';

export function useInfiniteFetch({key, fn, limit: propsLimit, params}) {
  const [enabled, setEnabled] = useState(false);
  const page = useRef(1);
  const limit = propsLimit ?? '10';

  useLayoutEffect(
    function () {
      page.current = 1;
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    key,
  );

  const {
    data,
    fetchNextPage,
    isFetching,
    isFetchingNextPage,
    hasNextPage,
    refetch,
  } = useInfiniteQuery(
    key,
    async function () {
      const result = await fn({page: page.current, limit, ...params});

      result.code === '200' && result.data.list.length > 0 && page.current++;

      return result;
    },
    {
      enabled,
      cacheTime: 0,
      select(data) {
        const list = data.pages
          .map(function (val) {
            return val.data.list;
          })
          .filter(val => val.length > 0);

        return {pageParams: data.pageParams, pages: list.flat(2)};
      },
      getNextPageParam(last) {
        if (!last) return false;

        return last.data.hasNextPage;
      },
    },
  );

  useReady(function () {
    setTimeout(() => setEnabled(true), 50);
  });

  const isEmpty =
    page.current === 1 && !data?.pages.length && !isFetching && !hasNextPage;

  const queryClient = useQueryClient();
  function refresh() {
    if (isFetching) return;
    page.current = 1;
    refetch({refetchPage: (_, index) => index === 0}).then(function () {
      queryClient.setQueriesData(key, function (data) {
        const firstData = data?.pages[0];

        return {
          pageParams: data.pageParams,
          pages: [firstData],
        };
      });
    });
  }

  return [
    {data, isFetching, isFetchingNextPage, hasNextPage, isEmpty},
    {fetchNextPage, refresh},
  ];
}