import { type FC } from 'react';
import { useNavigate } from 'react-router';

import RadioButtonCheckedIcon from '@material-hu/icons/material/RadioButtonChecked';
import { IconVideo } from '@material-hu/icons/tabler';
import Stack, { type StackProps } from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import useFeatureFlag from 'src/hooks/useFeatureFlag';
import usePermissions from 'src/hooks/usePermissions';
import {
  type Event,
  EventActions as EventActionTypes,
  InvitationStatus,
} from 'src/types/events';
import { FeatureFlags } from 'src/types/featureFlags';
import { type MeUser } from 'src/types/user';
import { canPerformAction } from 'src/utils/actionsLinks';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullLink } from 'src/utils/links';
import { UserPermissions } from 'src/utils/permissions';

import { useEventOrganizers } from '../hooks/useEventOrganizers';
import { eventsRoutes } from '../routes';

import EventMenuItems from './EventMenuItems';
import InvitePeopleButton from './InvitePeopleButton';
import ResponseButton from './ResponseButton';

type Props = {
  event: Event;
  user: MeUser | null;
  showDeleteModal: () => void;
  isLivestreamActive: boolean;
  sx?: StackProps['sx'];
};

export const EventActions: FC<Props> = props => {
  const { event, user, showDeleteModal, isLivestreamActive, sx } = props;
  const { t } = useLokaliseTranslation('events');
  const theme = useTheme();
  const navigate = useNavigate();
  const { isCoOrganizer } = useEventOrganizers(event);

  const isEventLivestreamEnabled = useFeatureFlag(
    FeatureFlags.EVENTS_LIVESTREAM_ENABLED,
  );

  const isMultipleOrganizersEnabled = useFeatureFlag(
    FeatureFlags.EVENTS_MULTIPLE_ORGANIZERS_ENABLED,
  );
  const { hasAll: hasLivestreamPermission } = usePermissions([
    UserPermissions.CREATE_LIVESTREAM,
    UserPermissions.VIEW_LIVESTREAM,
  ]);

  const hasResponded =
    event?.invitationStatus != null &&
    event.invitationStatus !== InvitationStatus.PENDING;

  const isEventOwner = user?.id === event?.userId;
  const { hasAny: canManageEvents } = usePermissions([
    UserPermissions.MANAGE_EVENTS,
  ]);
  const canInvitePeople = isMultipleOrganizersEnabled
    ? canPerformAction(event._links.invitations, EventActionTypes.CREATE)
    : canManageEvents;
  const canCreateLivestream =
    isEventLivestreamEnabled &&
    event.liveStream &&
    hasLivestreamPermission &&
    (isEventOwner || isCoOrganizer);

  return (
    <Stack sx={{ gap: 1, flexDirection: 'row', alignItems: 'center', ...sx }}>
      {isLivestreamActive && (
        <Stack sx={{ flexDirection: 'row' }}>
          <RadioButtonCheckedIcon
            sx={{
              color: theme.palette.new.action.button.background.error.default,
            }}
          />
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color={theme.palette.new.action.button.background.error.default}
          >
            {t('livestream:live')}
          </Typography>
        </Stack>
      )}
      {!isLivestreamActive && canCreateLivestream && (
        <Button
          variant="primary"
          startIcon={<IconVideo />}
          onClick={() => navigate(eventsRoutes.liveStream(event.id))}
        >
          {t('livestream:broadcast_live')}
        </Button>
      )}
      {event.videoCallUrl && (
        <Button
          variant={hasResponded ? 'primary' : 'secondary'}
          href={getFullLink({ link: event.videoCallUrl })}
          target="_blank"
          rel="noopener noreferrer"
          sx={{ minWidth: 150 }}
        >
          {t('JOIN_THE_EVENT')}
        </Button>
      )}
      <ResponseButton
        event={event}
        invitationStatus={event.invitationStatus}
        creatorId={event.userId}
        isCoOrganizer={isCoOrganizer}
      />
      {canInvitePeople && <InvitePeopleButton event={event} />}
      <EventMenuItems
        event={event}
        showDeleteModal={showDeleteModal}
        canManageEvent={canManageEvents || isEventOwner}
      />
    </Stack>
  );
};

export default EventActions;