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

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';

import HuBreadcrumbs from '@material-hu/components/design-system/Breadcrumbs';

import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

import { LearningContainer } from '../../../common/components/LearningContainer';
import useNavigateToSettings from '../../hooks/useNavigateToSettings';
import useSettingsTitle from '../../hooks/useSettingsTitle';
import { settingsRoutes } from '../../routes';
import { CATEGORIES_PAGE_ID } from '../constants';

import CategoriesHeader from './components/CategoriesHeader';
import CategoriesTable from './components/CategoriesTable';
import { CreateCategoryDrawer } from './components/CreateCategoryDrawer';

const Settings = () => {
  const { t } = useLokaliseTranslation('learning');
  const settingsTitle = useSettingsTitle();
  const navigateToSettings = useNavigateToSettings();

  const {
    showDrawer: showCreateCourseCategoryDrawer,
    drawer: createCourseCategoryDrawer,
  } = useDrawerV2(CreateCategoryDrawer);

  const handleCreate = () => {
    logEvent(LogEvents.NEW_CATEGORY_INICIATED);
    showCreateCourseCategoryDrawer({});
  };

  useEffect(() => {
    logEvent(LogEvents.LEARNING_SETTINGS_CATEGORIES_ENTERED);
  }, []);

  return (
    <>
      <Helmet>
        <title>{formatTitle(t('settings.categories.title'))}</title>
      </Helmet>
      <LearningContainer id={CATEGORIES_PAGE_ID}>
        {createCourseCategoryDrawer}
        <HuBreadcrumbs
          links={[
            {
              href: settingsRoutes.base(),
              onClick: navigateToSettings,
              title: settingsTitle,
            },
            {
              title: t('settings.categories.title'),
            },
          ]}
        />
        <CategoriesHeader onCreate={handleCreate} />
        <CategoriesTable onCreate={handleCreate} />
      </LearningContainer>
    </>
  );
};

export default Settings;
