import { FC, useState } from 'react';

import { useQuery } from 'react-query';

import { AxiosResponse } from 'axios';

import { useModal } from '@material-hu/hooks/useModal';
import FlagOutlined from '@material-hu/icons/material/FlagOutlined';
import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import NewModal from '@material-hu/components/deprecated/NewModal';
import useSnackbar from '@material-hu/components/design-system/Snackbar';

import { logEvent } from 'src/config/logging';
import { useAuth } from 'src/contexts/JWTContext';
import { ButtonText } from 'src/pages/dashboard/feed/components/ButtonText';
import { EventName } from 'src/types/amplitude';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type TranslatedPostResponse = {
  body: string;
  languageCode: string;
  postId: number;
};
type PostTranslateProps = {
  postId: number;
  translateKey: (string | number)[];
  getTranslatedPost: (
    id: number,
  ) => Promise<AxiosResponse<TranslatedPostResponse, any>>;
};
const PostTranslate: FC<PostTranslateProps> = props => {
  const { postId, translateKey, getTranslatedPost } = props;
  const [showTranslation, setShowTranslation] = useState(false);
  const { t } = useTranslation('post');
  const { enqueueSnackbar } = useSnackbar();
  const {
    user: { id: userId },
  } = useAuth();
  const {
    modal: reportModal,
    showModal: showReportModal,
    closeModal,
  } = useModal(
    () => (
      <Box
        sx={{
          '.MuiBox-root': {
            px: 3,
            pb: 2,
          },
          '.MuiDialogContent-root': {
            pt: '33px',
            pb: 3,
          },
        }}
      >
        <NewModal
          title={t('post_translate_report_title')}
          textBody={t('post_translate_report_body')}
          primaryButtonProps={{
            children: t('send_post_translate_report'),
            onClick: () => {
              logEvent(EventName.POST_TRANSLATE_REPORTED, {
                userId,
                postId,
              });
              enqueueSnackbar({
                title: t('send_post_translate_report_success'),
                variant: 'success',
              });

              closeModal();
            },
            color: 'primary',
            sx: { borderRadius: '12px' },
          }}
          secondaryButtonProps={{
            children: t('cancel'),
            onClick: closeModal,
            color: 'primary',
            sx: { borderRadius: '12px' },
          }}
          onClose={closeModal}
        />
      </Box>
    ),
    null,
  );

  const { data: translatedBody, isLoading } = useQuery(
    translateKey,
    () => getTranslatedPost(postId),
    {
      enabled: showTranslation,
      select: data => data?.data.body,
    },
  );

  const turnOnTranslation = () => setShowTranslation(true);
  const turnOffTranslation = () => setShowTranslation(false);
  const handleReportError = () => showReportModal();

  return (
    <Stack sx={{ flexDirection: 'row', gap: 2, mx: 2, mb: 1, mt: 1 }}>
      {!showTranslation && (
        <ButtonText onClick={turnOnTranslation}>
          {t('show_translation')}
        </ButtonText>
      )}
      {showTranslation && !isLoading && (
        <Stack
          sx={{
            gap: 1,
            pl: 2,
            borderLeft: theme => `2px solid ${theme.palette.divider}`,
          }}
        >
          <Typography sx={{ wordBreak: 'break-word' }}>
            {translatedBody}
          </Typography>
          <Stack sx={{ flexDirection: 'row', gap: 2 }}>
            <ButtonText
              onClick={handleReportError}
              sx={{
                gap: 1,
              }}
            >
              <FlagOutlined />
              {t('report_error')}
            </ButtonText>
            <ButtonText onClick={turnOffTranslation}>
              {t('hide_translation')}
            </ButtonText>
          </Stack>
        </Stack>
      )}
      {reportModal}
    </Stack>
  );
};

export default PostTranslate;