import { FormProvider } from 'react-hook-form';
import { useInfiniteQuery } from 'react-query';

import { isNil } from 'lodash-es';
import { useDebounce } from '@material-hu/hooks/useDebounce';
import { useHuPagination } from '@material-hu/hooks/useHuPagination';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { goalsKeys } from 'src/pages/dashboard/Goals/queries';
import { getGoalCycles } from 'src/services/goalsService';

import { useLokaliseTranslation } from 'src/utils/i18n';

import CyclesTableComponent from './CyclesTable';
import CyclesTableLoading from './CyclesTableLoading';

const CyclesTableContainer = () => {
  const { t } = useLokaliseTranslation('goals');
  const { params, Search, form } = useHuPagination({
    defaultOrderBy: 'ID',
    defaultOrder: 'DESC',
  });

  const debouncedSearch = useDebounce(params.search);

  const queryParams = {
    order: params.order,
    orderBy: params.orderBy,
    q: debouncedSearch || undefined,
  };

  const {
    data: goalCyclesData,
    fetchNextPage,
    refetch,
    isLoading: isLoadingTableData,
  } = useInfiniteQuery(
    goalsKeys.cycles(queryParams),
    ({ pageParam = 0 }) =>
      getGoalCycles({
        page: pageParam,
        limit: params.pagination.limit,
        order: queryParams.order,
        orderBy: queryParams.orderBy,
        q: queryParams.q,
      }),
    {
      getNextPageParam: lastPage =>
        lastPage.data.page < lastPage.data.totalPages - 1
          ? lastPage.data.page + 1
          : null,
    },
  );

  if (isLoadingTableData || isNil(goalCyclesData)) {
    return (
      <FormProvider {...form}>
        <Stack sx={{ gap: 3, mt: 3 }}>
          <Stack sx={{ gap: 1 }}>
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('formulas.search.placeholder')}
            </Typography>
            <Search
              inputProps={{
                placeholder: t('general:search_by_name'),
              }}
            />
          </Stack>
          <CyclesTableLoading />
        </Stack>
      </FormProvider>
    );
  }

  const cycles = goalCyclesData?.pages?.flatMap(page => page.data.items) || [];
  const totalCount = goalCyclesData?.pages?.[0]?.data?.count || 0;

  return (
    <FormProvider {...form}>
      <Stack sx={{ gap: 3, mt: 3 }}>
        <Stack sx={{ gap: 1 }}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
          >
            {t('formulas.search.placeholder')}
          </Typography>
          <Search
            inputProps={{
              placeholder: t('general:search_by_name'),
            }}
          />
        </Stack>
        <CyclesTableComponent
          cycles={cycles}
          totalCount={totalCount}
          onLoadMore={fetchNextPage}
          onDelete={refetch}
        />
      </Stack>
    </FormProvider>
  );
};

export default CyclesTableContainer;