import { type FC } from 'react';
import { Helmet } from 'react-helmet-async';

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

import useFeed from 'src/hooks/queryHooks/feed';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useRequiredParams from 'src/hooks/useRequiredParams';
import PostEditCard from 'src/pages/dashboard/feed/components/PostEditCard';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

const PostEdit: FC = () => {
  const { id } = useRequiredParams(['id'], -1);
  const { t } = useTranslation();
  const { feedDetail } = useFeed();

  const { data, isLoading } = feedDetail(id);

  const HugoThemeProvider = useHuGoTheme();

  const post = data?.data;

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

export default PostEdit;