import { useEffect, useRef } from 'react';
import { Helmet } from 'react-helmet-async';
import { Link as RouterLink, useLocation } from 'react-router-dom';

import CrossedOutEyes from '@material-hu/motion-icons/emojis/CrossedOutEyes';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

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

type Props = {
  resetError?: () => void;
  resetOnLocationChange?: boolean;
};

const ErrorFallback = ({
  resetError = () => {},
  resetOnLocationChange = false,
}: Props) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('errors');
  const HuGoThemeProvider = useHuGoTheme();
  const { pathname } = useLocation();
  const failedPathname = useRef<string>(pathname);

  useEffect(() => {
    if (resetOnLocationChange && failedPathname.current !== pathname) {
      resetError();
    }
  }, [pathname, resetError, resetOnLocationChange]);

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('general:error'))}</title>
      </Helmet>
      <Stack
        sx={{
          alignItems: 'center',
          backgroundColor: 'new.background.layout.tertiary',
          height: '100%',
        }}
      >
        <Container
          maxWidth="md"
          sx={{
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
          }}
        >
          <Stack sx={{ alignItems: 'center', mb: 2 }}>
            <CrossedOutEyes
              color={theme.palette.newBase?.brand[300]}
              style={{
                width: '110px',
                height: '110px',
              }}
            />
          </Stack>
          <Title
            title={t('general:page_load_error.title')}
            description={t('general:page_load_error.description')}
            variant="XL"
            slotProps={{
              title: {
                sx: {
                  color: 'new.text.neutral.brand',
                },
              },
              description: {
                sx: {
                  color: 'new.text.neutral.default',
                },
              },
            }}
            centered
          />
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'center',
              mt: 6,
              gap: 3,
            }}
          >
            <Button
              component={RouterLink}
              onClick={resetError}
              to="/"
              variant="secondary"
              size="large"
            >
              {t('general:back_to_start')}
            </Button>
            <Button
              onClick={() => window.location.reload()}
              variant="primary"
              size="large"
            >
              {t('general:retry')}
            </Button>
          </Stack>
        </Container>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default ErrorFallback;