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

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

import HuTabs from '@material-hu/components/design-system/Tabs';
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 { LogEvents, logEvent } from 'src/utils/logging';

import ActivityRecord from './components/ActivityRecord';

const TabComponents = {
  ACTIVITY_RECORD: ActivityRecord,
};

const SecuritySettings = () => {
  const [selectedTab, setSelectedTab] = useState('ACTIVITY_RECORD');
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('settings');

  const securityTabs = [
    { label: t('SECURITY.ACTIVITY_RECORD'), value: 'ACTIVITY_RECORD' },
  ];

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

  const handleTabChange = (value: string) => {
    setSelectedTab(value);
  };

  const SelectedComponent =
    TabComponents[selectedTab as keyof typeof TabComponents] ?? null;

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('SECURITY.SECURITY'))}</title>
      </Helmet>
      <Stack
        sx={{
          bgcolor: theme => theme.palette?.hugoBackground?.neutralBg,
          px: 12,
          py: 5,
          gap: 4,
          minHeight: '100%',
        }}
      >
        <Stack>
          <HuTitle
            variant="L"
            title={t('SECURITY.SECURITY')}
            description={t('SECURITY.PROTECT_DATA')}
          />
        </Stack>
        <HuTabs
          defaultValue={selectedTab}
          tabs={securityTabs}
          onTabChange={handleTabChange}
        />
        {SelectedComponent && <SelectedComponent />}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default SecuritySettings;