import { FC, useMemo } from 'react';
import { Helmet } from 'react-helmet-async';
import { useNavigate, useSearchParams } from 'react-router-dom';

import { IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuTabs from '@material-hu/components/design-system/Tabs';
import HuTitle from '@material-hu/components/design-system/Title';

import { logEvent } from 'src/config/logging';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { EventName } from 'src/types/amplitude';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { eventsRoutes } from '../routes';
import { useIsEventsManager } from '../utils';

import Invitations from './components/Invitations';
import MyEvents from './components/MyEvents';
import OrganizedByMe from './components/OrganizedByMe';
import Past from './components/Past';

export const EventsList: FC = () => {
  const { t } = useLokaliseTranslation('events');
  const navigate = useNavigate();
  const isEventsManager = useIsEventsManager();
  const [searchParams, setSearchParams] = useSearchParams({
    source: 'MY_EVENTS',
  });
  const source = searchParams.get('source');

  const ThemeProvider = useHuGoTheme();
  const tabs = [
    { label: t('MY_EVENTS'), value: 'MY_EVENTS', component: <MyEvents /> },
    {
      label: t('INVITATIONS'),
      value: 'INVITATIONS',
      component: <Invitations />,
    },
    { label: t('PAST'), value: 'PAST_EVENTS', component: <Past /> },
    ...insertIf(isEventsManager, {
      label: t('ORGANIZED_BY_ME'),
      value: 'ORGANIZED_BY_ME',
      component: <OrganizedByMe />,
    }),
  ];

  const handleClick = () => {
    navigate(eventsRoutes.new());
  };

  const handleTabChange = (_: any, i: number) => {
    setSearchParams({ source: tabs[i].value });
    logEvent(EventName.EVENT_SECTION_VISITED, {
      tab: tabs[i].value,
    });
  };

  const activeTabIndex = useMemo(
    () =>
      Math.max(
        0,
        tabs.findIndex(tab => tab.value === source),
      ),
    [tabs, source],
  );

  return (
    <ThemeProvider>
      <Helmet>
        <title>{t('EVENTS')}</title>
      </Helmet>
      <Stack
        sx={{
          px: '105px',
          pt: 4,
          minHeight: '100vh',
          backgroundColor: theme => theme.palette.new.background.layout.default,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <HuTitle
            title={t('EVENTS')}
            variant="L"
          />
          {isEventsManager && (
            <Button
              variant="primary"
              size="small"
              onClick={handleClick}
              startIcon={<IconPlus />}
            >
              {t('CREATE_EVENT')}
            </Button>
          )}
        </Stack>
        <HuTabs
          tabs={tabs}
          sx={{ mt: 2, mb: 3 }}
          onTabChange={handleTabChange}
          defaultValue={tabs[activeTabIndex].value}
        />
        {tabs[activeTabIndex].component}
      </Stack>
    </ThemeProvider>
  );
};

export default EventsList;
