import { FC, ReactNode } from 'react';
import { Helmet } from 'react-helmet-async';
import { FetchNextPageOptions, InfiniteQueryObserverResult } from 'react-query';

import { IconArrowLeft, IconX } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import HuEmptyState from 'src/components/HuEmptyState';
import InfiniteList from 'src/components/list/InfiniteList';

import { FeedPostSkeleton } from '../../pages/dashboard/events/components/skeleton/FeedPostSkeleton';

export type PinnedPostsLayoutProps = {
  onBack: () => void;
  onClose: () => void;
  isLoading: boolean;
  isEmpty: boolean;
  hasNextPage?: boolean;
  isFetchingNextPage?: boolean;
  fetchNextPage?: (
    options?: FetchNextPageOptions,
  ) => Promise<InfiniteQueryObserverResult<unknown, unknown>>;
  children: ReactNode;
};

const PinnedPostsLayout: FC<PinnedPostsLayoutProps> = ({
  onBack,
  onClose,
  isLoading,
  isEmpty,
  hasNextPage,
  isFetchingNextPage,
  fetchNextPage,
  children,
}) => {
  const { t } = useTranslation(['post', 'general']);
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('post:pinned_posts'))}</title>
      </Helmet>
      <Box
        sx={theme => ({
          backgroundColor: theme.palette.new.background.layout.default,
          minHeight: '100vh',
        })}
      >
        <Stack
          sx={{
            alignItems: 'center',
            backgroundColor: theme =>
              theme.palette.new.background.layout.tertiary,
            flexDirection: 'row',
            justifyContent: 'space-between',
            px: 3,
            py: 1,
            width: '100%',
          }}
        >
          <Stack
            sx={{
              alignItems: 'center',
              flexDirection: 'row',
              gap: 1,
            }}
          >
            <IconButton
              onClick={onBack}
              aria-label={t('general:back')}
            >
              <IconArrowLeft />
            </IconButton>
            <HuTitle
              variant="L"
              title={t('post:pinned_posts')}
            />
          </Stack>
          <IconButton
            onClick={onClose}
            aria-label={t('general:close')}
          >
            <IconX />
          </IconButton>
        </Stack>
        <Container maxWidth="sm">
          <InfiniteList
            isSuccess={!isLoading}
            isLoading={isLoading}
            isEmpty={isEmpty}
            fetchNextPage={fetchNextPage}
            hasNextPage={hasNextPage}
            isFetchingNextPage={isFetchingNextPage}
            loadingSkeleton={isLoading}
            renderSkeleton={
              <HugoThemeProvider>
                <Stack
                  sx={{
                    gap: 2,
                    pt: 2,
                    '.MuiPaper-root': {
                      borderColor: theme =>
                        theme.palette.new.border.neutral.default,
                    },
                  }}
                >
                  {Array.from({ length: 3 }, (_, i) => (
                    <FeedPostSkeleton key={`skeleton-${i}`} />
                  ))}
                </Stack>
              </HugoThemeProvider>
            }
            noResultsLabel={
              <HuEmptyState
                titleProps={{
                  title: t('post:no_pinned_posts'),
                  variant: 'M',
                }}
                sx={{
                  backgroundColor: 'transparent',
                }}
              />
            }
          >
            <Stack sx={{ gap: 2, pt: 2, pb: 8 }}>{children}</Stack>
          </InfiniteList>
        </Container>
      </Box>
    </HugoThemeProvider>
  );
};

export default PinnedPostsLayout;