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

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

import { useAuth } from 'src/contexts/JWTContext';
import useOnboarding from 'src/hooks/queryHooks/onboarding';
import OnboardingContent from 'src/pages/dashboard/onboarding/components/OnboardingContent';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

const Onboarding = () => {
  const { t } = useLokaliseTranslation('onboarding');
  const { user } = useAuth();

  const { data, isLoading } = useOnboarding(user!.id);

  const categories = data?.data || [];

  return (
    <>
      <Helmet>
        <title>{formatTitle(t('onboardings'))}</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: 'background.default',
          display: 'flex',
          height: 'inherit',
          position: 'relative',
        }}
      >
        <Typography
          color="textPrimary"
          variant="h5"
          component="h1"
          sx={{
            pt: 2,
            pl: 3,
            position: 'absolute',
          }}
        >
          {t('onboardings')}
        </Typography>
        {isLoading && (
          <Box
            sx={{
              textAlign: 'center',
              width: '100%',
            }}
          >
            <CircularProgress />
          </Box>
        )}
        {!isLoading && !!categories.length && (
          <Box
            sx={{
              flexGrow: 1,
              overflowY: 'hidden',
            }}
          >
            <OnboardingContent categories={categories} />
          </Box>
        )}
        {!isLoading && !categories.length && (
          <Box
            sx={{
              py: 2,
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Typography
              color="textSecondary"
              variant="subtitle2"
            >
              {t('no_onboardings')}
            </Typography>
          </Box>
        )}
      </Box>
    </>
  );
};

export default Onboarding;
