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

import { IconX } from '@material-hu/icons/tabler';
import CircularProgress from '@material-hu/mui/CircularProgress';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useAuth } from 'src/contexts/JWTContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useRequiredParams from 'src/hooks/useRequiredParams';
import { getDraftDetail } from 'src/services/posts';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import PostDraftEditCard from '../components/PostDraftEditCard';
import { postDraftKeys } from '../queries';
import { draftsForReviewRoutes } from '../routes';

const DraftEdit = () => {
  const navigate = useNavigate();
  const { user: loggedUser } = useAuth();
  const { id: draftId } = useRequiredParams(['id']);
  const { t } = useTranslation();
  const HuGoThemeProvider = useHuGoTheme();

  const { data: draftDetail, isLoading } = useQuery(
    postDraftKeys.draftDetail(draftId),
    () => getDraftDetail(Number(draftId)),
    {
      enabled: true,
      select: res => res.data,
      onSuccess: res => {
        if (res?.draftPermission?.userToId !== loggedUser?.id) {
          navigate(draftsForReviewRoutes.drafts());
        }
      },
    },
  );

  if (isLoading) {
    return (
      <Stack sx={{ alignItems: 'center', p: 4 }}>
        <CircularProgress />
      </Stack>
    );
  }

  return (
    <>
      <Helmet>
        <title>{formatTitle(t('EDIT'))}</title>
      </Helmet>
      <HuGoThemeProvider>
        <Stack
          sx={{
            overflowX: 'hidden',
            height: '100%',
            bgcolor: theme => theme.palette.new.background.layout.default,
          }}
        >
          <Stack
            sx={{
              overflowX: 'hidden',
              height: '100%',
              bgcolor: theme => theme.palette.new.background.layout.default,
            }}
          >
            <Stack
              sx={{
                alignItems: 'center',
                flexDirection: 'row',
                justifyContent: 'space-between',
                bgcolor: theme => theme.palette.new.background.layout.tertiary,
                gap: 2,
                py: 2,
                px: 3,
              }}
            >
              <Typography
                variant="globalL"
                fontWeight="fontWeightSemiBold"
              >
                {t('EDIT')}
              </Typography>
              <IconButton
                onClick={() => navigate(draftsForReviewRoutes.drafts())}
              >
                <IconX />
              </IconButton>
            </Stack>
            {isLoading && (
              <Stack sx={{ alignItems: 'center', p: 4 }}>
                <CircularProgress />
              </Stack>
            )}
            {!isLoading && draftDetail && (
              <PostDraftEditCard draftDetail={draftDetail} />
            )}
          </Stack>
        </Stack>
      </HuGoThemeProvider>
    </>
  );
};

export default DraftEdit;