import { FC, useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { useNavigate } from 'react-router';

import Stack from '@material-hu/mui/Stack';

import HuAlert from '@material-hu/components/design-system/Alert';
import HuSpinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import HuTitle from '@material-hu/components/design-system/Title';

import { requestsOptions, canShowBanBajio } from 'src/constants/banBajio';
import { useAuth } from 'src/contexts/JWTContext';
import { useMobile } from 'src/contexts/MobileContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useMobileLayout } from 'src/hooks/useMobileLayout';
import { useMobileToken } from 'src/hooks/useMobileToken';
import RequestCardType from 'src/pages/dashboard/banBajio/components/RequestTypeCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useDynamicFields } from './useDynamicFields';

export type RequestsProps = {
  isMobile?: boolean;
};

const Requests: FC<RequestsProps> = props => {
  const { isMobile = false } = props;
  const { setIsMobile } = useMobile();
  const navigate = useNavigate();
  const { instance } = useAuth();
  const { t } = useLokaliseTranslation('banbajio');
  const HugoThemeProvider = useHuGoTheme();

  const { data: profileData, isLoading } = useDynamicFields();

  useEffect(() => {
    isMobile && setIsMobile(isMobile);
  }, []);

  useMobileToken();
  useMobileLayout();

  if (!canShowBanBajio(instance!.id)) {
    return null;
  }

  if (isLoading) return <HuSpinner />;

  return (
    <HugoThemeProvider>
      <Helmet>
        <title>{t('REQUESTS')}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
          minHeight: '100%',
          pt: isMobile ? 4 : 8,
          px: isMobile ? 3 : 12,
          gap: 3,
        }}
      >
        <HuTitle
          variant={isMobile ? 'M' : 'XL'}
          title={t('REQUESTS')}
          description={t('REQUESTS_SUBTITLE')}
        />
        <Stack sx={{ flexDirection: isMobile ? 'column' : 'row', gap: 3 }}>
          {requestsOptions.map(module => (
            <RequestCardType
              key={module.title}
              title={t(module.title)}
              description={t(module.description)}
              disabled={!profileData?.isValid}
              color={module.color}
              Icon={module.icon}
              onClick={() => navigate(module.navigate())}
            />
          ))}
        </Stack>
        {!profileData?.isValid && (
          <HuAlert
            title={t('INVALID_VALIDATION_REQUEST')}
            description={t('INVALID_VALIDATION_REQUEST_DESCRIPTION')}
            severity="warning"
            sx={{ mb: 1 }}
          />
        )}
      </Stack>
    </HugoThemeProvider>
  );
};

export default Requests;