import { FC, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';
import { useInfiniteQuery, useMutation } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { useDebounce } from '@material-hu/hooks/useDebounce';
import { useModal } from '@material-hu/hooks/useModal';
import { IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuDialog from '@material-hu/components/design-system/Dialog';
import HuSearch from '@material-hu/components/design-system/Inputs/Search';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import HuTitle from '@material-hu/components/design-system/Title';

import useGeneralError from 'src/hooks/useGeneralError';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { deleteDraftPermission, getDraftPermissions } from 'src/services/posts';
import { formatTitle } from 'src/utils/helmetUtils';
import { flatPages } from 'src/utils/tableUtils';

import { InfiniteList } from 'src/components/InfiniteList';

import DraftPermissionsSkeleton from './components/DraftPermissionsSkeleton';
import DraftPermissionsTable from './components/DraftPermissionsTable';
import { draftPermissionsKeys } from './queries';
import { draftsForReviewRoutes } from './routes';

const LIMIT = 10;

const DraftsForReview: FC = () => {
  const [query, setQuery] = useState<string>('');
  const { t } = useTranslation(['drafts']);
  const navigate = useNavigate();
  const HuGoThemeProvider = useHuGoTheme();
  const showGeneralError = useGeneralError();
  const { enqueueSnackbar } = useHuSnackbar();
  const debouncedQuery = useDebounce(query);

  const params = { q: debouncedQuery || null, limit: LIMIT };

  const {
    data,
    isLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    refetch: refetchDraftPermissions,
    ...queryProps
  } = useInfiniteQuery(
    draftPermissionsKeys.all(debouncedQuery),
    ({ pageParam = '' }) =>
      getDraftPermissions({ ...params, cursor: pageParam }),
    {
      getNextPageParam: lastPage => lastPage?.data?.cursor,
      cacheTime: 0,
      onError: err => {
        showGeneralError(err, t('error_loading_draft_permissions'));
      },
    },
  );

  const deleteMutation = useMutation(
    ({ id }: { id: number }) => deleteDraftPermission(id),
    {
      onSuccess: () => {
        enqueueSnackbar({
          title: t('delete_success'),
          variant: 'success',
        });
        refetchDraftPermissions();
      },
    },
  );

  const handleChangeQuery = (value: string) => setQuery(value);

  const isEmpty = queryProps.isSuccess && !data?.pages[0]?.data?.items?.length;

  const draftPermissions = flatPages(data);

  const {
    modal: deleteModal,
    showModal: showDeleteModal,
    closeModal: closeDeleteModal,
  } = useModal<{ id: number; fullName: string }>(({ id, fullName }) => (
    <HuDialog
      title={t('delete_draft_permission_sure')}
      textBody={t('delete_draft_permission_body', { fullName })}
      primaryButtonProps={{
        loading: deleteMutation.isLoading,
        children: t('yes_delete'),
        onClick: () =>
          deleteMutation.mutateAsync({ id }, { onSettled: closeDeleteModal }),
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: closeDeleteModal,
      }}
      onClose={closeDeleteModal}
    />
  ));

  return (
    <>
      <Helmet>
        <title>{formatTitle(t('draft_for_review'))}</title>
      </Helmet>
      <HuGoThemeProvider>
        {deleteModal}
        <Stack
          sx={{
            backgroundColor: theme => theme.palette.hugoBackground?.neutralBg,
            minHeight: '100%',
            px: 12,
            py: 5,
            gap: 2,
          }}
        >
          <Stack
            sx={{
              gap: 2,
              flex: 0,
              flexWrap: 'wrap',
              flexDirection: 'row',
              alignItems: 'center',
            }}
          >
            <HuTitle
              sx={{ flex: 1 }}
              variant="L"
              title={t('module_title')}
            />
            <Button
              variant="primary"
              size="small"
              startIcon={<IconPlus size={16} />}
              onClick={() => {
                navigate(draftsForReviewRoutes.createDraftPermission());
              }}
            >
              {t('grant_permission')}
            </Button>
          </Stack>
          <Typography
            variant="globalS"
            sx={{
              color: theme => theme.palette.textColors?.neutralTextDisabled,
            }}
          >
            {t('module_description')}
          </Typography>
          <HuSearch
            value={query}
            onChange={handleChangeQuery}
            fullWidth
            sx={{ mt: 2, mb: 1 }}
          />
          <InfiniteList
            isSuccess={!!data}
            isLoading={isLoading}
            fetchNextPage={fetchNextPage}
            hasNextPage={hasNextPage}
            isFetchingNextPage={isFetchingNextPage}
            loadingFallback={<DraftPermissionsSkeleton />}
          >
            <DraftPermissionsTable
              draftPermissions={draftPermissions}
              onDelete={showDeleteModal}
              isLoading={isLoading}
              noResults={!isLoading && isEmpty && !!debouncedQuery}
            />
          </InfiniteList>
        </Stack>
      </HuGoThemeProvider>
    </>
  );
};

export default DraftsForReview;