import { type FC } from 'react';

import { isNumber } from 'lodash-es';
import {
  IconHourglass,
  IconLink,
  IconLockOpen,
  IconMapPin,
  IconTicket,
  IconUser,
  IconVideo,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuLink from '@material-hu/components/design-system/Link';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

import useFeatureFlag from 'src/hooks/useFeatureFlag';
import { type Event } from 'src/types/events';
import { FeatureFlags } from 'src/types/featureFlags';
import { type MeUser } from 'src/types/user';
import { formatDurationEvents } from 'src/utils/date';
import { formatOrganizersText } from 'src/utils/events';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullLink } from 'src/utils/links';
import { getFullName } from 'src/utils/userUtils';

import ShowMoreText from 'src/components/text/ShowMoreText';

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

import EventItemInfo from './EventItemInfo';
import GroupTitleDescription from './GroupTitleDescription';

type Props = {
  event: Event;
  user: MeUser | null;
};

export const EventDetails: FC<Props> = ({ event, user }) => {
  const { t } = useLokaliseTranslation('events');
  const isPresencialEvent = event?.location && !event?.videoCallUrl;
  const remainingSpace = event?.remainingSpace;
  const isAvailabletoRespond = isNumber(remainingSpace);

  const { acceptedOrganizers, organizersCount } = useEventOrganizers(event);

  const isMultipleOrganizersEnabled = useFeatureFlag(
    FeatureFlags.EVENTS_MULTIPLE_ORGANIZERS_ENABLED,
  );

  const organizersText = isMultipleOrganizersEnabled
    ? formatOrganizersText(acceptedOrganizers, acceptedOrganizers.length, t)
    : getFullName(event.user);

  return (
    <HuCardContainer
      fullWidth
      sx={{ overflow: 'visible', p: 1 }}
    >
      <Stack sx={{ alignItems: 'flex-start', gap: 2 }}>
        <HuTitle
          title={t('DETAILS')}
          variant="S"
        />
        {event.endDateTime && (
          <EventItemInfo
            Icon={IconHourglass}
            info={
              <Typography sx={{ fontWeight: 'fontWeightSemiBold' }}>
                {formatDurationEvents(
                  event.startDateTime,
                  event.endDateTime,
                  user,
                )}
              </Typography>
            }
          />
        )}
        <EventItemInfo
          Icon={IconLockOpen}
          info={<GroupTitleDescription group={event.group} />}
        />
        <EventItemInfo
          Icon={IconUser}
          info={
            <Skeleton
              variant="text"
              width={250}
              height={20}
              isLoading={isMultipleOrganizersEnabled && organizersCount === 0}
            >
              <Typography>
                {t('event_organized_by')}{' '}
                <Typography
                  component="span"
                  sx={{ fontWeight: 'fontWeightSemiBold' }}
                >
                  {organizersText}
                </Typography>
              </Typography>
            </Skeleton>
          }
        />
        {event.videoCallUrl && (
          <EventItemInfo
            Icon={IconLink}
            info={
              <HuLink
                href={getFullLink({ link: event.videoCallUrl })}
                target="_blank"
                rel="noopener noreferrer"
              >
                {event.videoCallUrl}
              </HuLink>
            }
          />
        )}
        {event.location && (
          <EventItemInfo
            Icon={IconMapPin}
            info={
              <Typography sx={{ fontWeight: 'fontWeightSemiBold' }}>
                {event.location}
              </Typography>
            }
          />
        )}
        {event.liveStream && (
          <EventItemInfo
            Icon={IconVideo}
            info={
              <Typography sx={{ fontWeight: 'fontWeightSemiBold' }}>
                {t('livestream:humand_broadcast')}
              </Typography>
            }
          />
        )}
        {isPresencialEvent && isAvailabletoRespond && (
          <EventItemInfo
            Icon={IconTicket}
            info={
              <Typography sx={{ fontWeight: 'fontWeightSemiBold' }}>
                {t('SPOTS_LEFT', { count: remainingSpace })}
              </Typography>
            }
          />
        )}
        <ShowMoreText
          text={event.description}
          more={t('general:see_more')}
          less={t('general:see_less')}
          buttonProps={{ sx: { p: 0, minWidth: 0 } }}
          lines={2}
        />
      </Stack>
    </HuCardContainer>
  );
};

export default EventDetails;