import { type FC } from 'react';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { IconChevronRight, IconUserPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack/Stack';
import useTheme from '@material-hu/mui/styles/useTheme';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuTitle from '@material-hu/components/design-system/Title';

import { useAuth } from 'src/contexts/JWTContext';
import useFeatureFlag from 'src/hooks/useFeatureFlag';
import { type Event } from 'src/types/events';
import { FeatureFlags } from 'src/types/featureFlags';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useEventOrganizers } from '../hooks/useEventOrganizers';
import { useMultipleOrganizerDrawer } from '../hooks/useMultipleOrganizerDrawer';

import { OrganizerListItem } from './OrganizerListItem';
import OrganizersListDrawer from './OrganizersListDrawer';

type OrganizerCardProps = {
  event: Event;
};

export const OrganizerCard: FC<OrganizerCardProps> = props => {
  const { event } = props;
  const { t } = useLokaliseTranslation('events');
  const theme = useTheme();
  const { user } = useAuth();
  const isMultipleOrganizersEnabled = useFeatureFlag(
    FeatureFlags.EVENTS_MULTIPLE_ORGANIZERS_ENABLED,
  );

  const {
    drawerElements: multipleOrganizerDrawerElements,
    showDrawer: showMultipleOrganizerDrawer,
  } = useMultipleOrganizerDrawer({
    event,
  });

  const { drawer: organizersListDrawer, showDrawer: showOrganizersListDrawer } =
    useDrawerV2(({ closeDrawer }) => ({
      title: t('organized_by'),
      children: <OrganizersListDrawer event={event} />,
      primaryButtonProps: {
        children: t('close'),
        onClick: () => closeDrawer(),
        fullWidth: true,
      },
    }));

  const {
    creator,
    ownUserOrganizer,
    displayOrganizers,
    hasMoreOrganizers,
    organizersCount,
  } = useEventOrganizers(event);

  const canAddOrganizers =
    isMultipleOrganizersEnabled &&
    (creator.id === user?.id || ownUserOrganizer);

  return (
    <HuCardContainer
      fullWidth
      sx={{ p: 1 }}
    >
      {multipleOrganizerDrawerElements}
      {organizersListDrawer}
      <Stack sx={{ gap: 2 }}>
        <HuTitle
          title={t('organized_by')}
          variant="S"
        />
        {displayOrganizers.map(organizer => (
          <OrganizerListItem
            key={organizer.id}
            organizer={organizer}
            event={event}
            creatorId={creator?.id}
            slotProps={{
              container: {
                sx: {
                  p: 0,
                },
              },
            }}
          />
        ))}
        {hasMoreOrganizers && (
          <HuListItem
            text={{
              title: t('more_collaborators', { count: organizersCount }),
            }}
            action={{
              Icon: IconChevronRight,
              onClick: () => showOrganizersListDrawer({}),
            }}
            sx={{
              '& .MuiListItem-root svg': {
                stroke: theme.palette.newBase?.brand[500],
              },
            }}
            slotProps={{
              container: {
                sx: {
                  p: 0,
                },
              },
              title: {
                slotProps: {
                  title: {
                    sx: {
                      color: theme.palette.newBase?.brand[500],
                    },
                  },
                },
              },
            }}
          />
        )}
        {canAddOrganizers && (
          <Button
            variant="secondary"
            size="large"
            startIcon={<IconUserPlus size={16} />}
            fullWidth
            onClick={showMultipleOrganizerDrawer}
          >
            {t('add_organizer')}
          </Button>
        )}
      </Stack>
    </HuCardContainer>
  );
};