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

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

import HuTitle from '@material-hu/components/design-system/Title';

import { logEvent } from 'src/config/logging';
import { useFeatureFlag } from 'src/contexts/FeatureFlagsContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { EventName, Modules } from 'src/types/amplitude';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import EmployeeLifecycleFallback from '../Fallback';

import { TaskTabs } from './components/Tabs';
import { TaskDetail } from './components/TaskDetail';

const UserTasks = () => {
  const { t } = useLokaliseTranslation(['employee_lifecycle', 'screens']);
  const HuGoThemeProvider = useHuGoTheme();

  const { value: isEmployeeLifecycleEnabled, isLoading: loadingFlag } =
    useFeatureFlag('ENABLE_EMPLOYEE_LIFECYCLE');

  useEffect(() => {
    logEvent(EventName.USER_MODULE_USE, { module: Modules.TASKS });
  }, []);

  if (loadingFlag || !isEmployeeLifecycleEnabled)
    return <EmployeeLifecycleFallback />;

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('screens:Tasks'))}</title>
      </Helmet>
      <Stack
        id="user-tasks-tabs"
        sx={{
          maxWidth: 'xl',
          mx: 'auto',
          minHeight: '100%',
          p: 3,
          gap: 4,
          backgroundColor: theme => theme.palette.new.background.layout.default,
        }}
      >
        <HuTitle
          title={t('tasks.my_tasks')}
          variant="L"
        />
        <TaskTabs isUserTasksModule />
        <TaskDetail isUserTasksModule />
      </Stack>
    </HuGoThemeProvider>
  );
};

export default UserTasks;