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

import { useNavigate } from 'react-router';

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

import HuTaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import HuTitle 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';

import {
  NotificationChannelCodes,
  NotificationModuleCodes,
} from '../constants';

import NotificationModuleCard from './NotificationModuleCard';

type NotificationsConfigLoadingProps = {
  title: string;
  description: string;
};

const NotificationsConfigLoading = (props: NotificationsConfigLoadingProps) => {
  const { title, description } = props;
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation(['notifications_center', 'general']);
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <HuGoThemeProvider>
      <Stack sx={{ height: '100%' }}>
        <Helmet>
          <title>{formatTitle(t('general:settings'))}</title>
        </Helmet>
        <HuTaskFocusHeader
          title={t('general:settings')}
          onBack={handleBack}
        />
        <Stack
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
            height: '100%',
            p: 3,
            gap: 3,
            alignItems: 'center',
          }}
        >
          <Stack sx={{ width: '70%', maxWidth: '1040px', gap: 2 }}>
            <HuTitle
              variant="L"
              title={title}
              description={description}
            />
            <Stack
              sx={{
                display: 'grid',
                gridTemplateColumns: {
                  xs: '1fr',
                  sm: 'repeat(2, 1fr)',
                },
                gap: 2,
                mb: 2,
                width: '100%',
              }}
            >
              {Object.values(NotificationModuleCodes).map(moduleName => (
                <NotificationModuleCard
                  key={moduleName}
                  moduleName={moduleName}
                  channelsPreferences={{
                    [NotificationChannelCodes.BELL]: false,
                    [NotificationChannelCodes.PUSH]: false,
                    [NotificationChannelCodes.MAIL]: false,
                  }}
                  isLoading={true}
                  onSelect={() => {}}
                />
              ))}
            </Stack>
          </Stack>
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default NotificationsConfigLoading;