import { type FC } from 'react';
import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';
import { useNavigate } from 'react-router-dom';

import CircularProgress from '@material-hu/mui/CircularProgress';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useGeneralError from 'src/hooks/useGeneralError';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useRequiredParams from 'src/hooks/useRequiredParams';
import { getGroupPostDetails } from 'src/services/groups';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import GroupPostEditCard from './components/GroupPostEditCard';
import { groupsKeys } from './queries';

const GroupPostEdit: FC = () => {
  const { id: groupId, postId } = useRequiredParams(['id', 'postId'], -1);
  const navigate = useNavigate();
  const { t } = useTranslation(['post']);

  const HugoThemeProvider = useHuGoTheme();
  const showGeneralError = useGeneralError();

  const { data: post, isLoading: isLoadingPost } = useQuery(
    groupsKeys.postDetail(groupId, postId),
    () => getGroupPostDetails(groupId, postId),
    {
      select: response => response.data,
      onError: err => {
        showGeneralError(err, t('error_loading_post'));
      },
      cacheTime: 0,
      staleTime: 0,
      keepPreviousData: false,
    },
  );

  const onEditSuccess = () => {
    navigate(-1);
  };

  return (
    <HugoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('group:groups'))}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          minHeight: '100%',
          pt: 2,
          pb: 8,
        }}
      >
        <Container maxWidth="lg">
          {isLoadingPost && (
            <Stack sx={{ textAlign: 'center' }}>
              <CircularProgress />
            </Stack>
          )}
          {!isLoadingPost && post && (
            <Stack>
              <Typography
                variant="globalM"
                fontWeight="fontWeightSemiBold"
                color={theme => theme.palette.new.text.neutral.brand}
                component="h1"
                sx={{ mb: 3 }}
              >
                {t('post:edit_post_web')}
              </Typography>
              <GroupPostEditCard
                id={post.id}
                body={post.body}
                bodyHtml={post.bodyHtml}
                bodyAttributes={post.bodyAttributes || []}
                linkPreviews={post.linkPreviews}
                attachments={post.attachments}
                state={post.state}
                groupId={groupId}
                poll={post.poll}
                metadata={post.metadata}
                onSuccess={onEditSuccess}
                _links={post._links}
              />
            </Stack>
          )}
        </Container>
      </Stack>
    </HugoThemeProvider>
  );
};

export default GroupPostEdit;