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

import { IconDeviceMobile } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';

import HuStateCard from '@material-hu/components/composed-components/StateCard';

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

const EmployeeLifecycleFallback = () => {
  const navigate = useNavigate();

  const { t } = useLokaliseTranslation('employee_lifecycle');
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('screens:Onboardings'))}</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          minHeight: '100%',
          pt: 5,
          pb: 2,
        }}
      >
        <Container
          sx={{
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <HuStateCard
            // TODO: Remove when material-hu no longer needs this prop.
            title={t('unavailable_landing.landing_title')}
            slotProps={{
              avatar: {
                color: 'primary',
                Icon: IconDeviceMobile,
              },
              title: {
                title: t('unavailable_landing.landing_title'),
                description: t('unavailable_landing.landing_description'),
                variant: 'M',
              },
              button: {
                children: t('unavailable_landing.landing_button_title'),
                variant: 'secondary',
                color: 'primary',
                size: 'medium',
                onClick: () => {
                  navigate('/');
                },
              },
            }}
          />
        </Container>
      </Box>
    </HuGoThemeProvider>
  );
};

export default EmployeeLifecycleFallback;
