import {
  IconCalendarExclamation,
  IconCertificate,
  IconClock,
  IconEyeCheck,
  IconLink,
  IconMapPin,
} from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography/Typography';

import Property from '@material-hu/components/composed-components/Property';
import { type PropertyProps } from '@material-hu/components/composed-components/Property/types';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Link from '@material-hu/components/design-system/Link';

import { getTimeZoneInfo } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { type SessionDetail } from '../../../types';

type SessionDetailsProps = { session: SessionDetail };

export const SessionDetails = ({ session }: SessionDetailsProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();

  const timezoneInfo = getTimeZoneInfo(session?.timeZone);

  const items: PropertyProps[] = [
    {
      Icon: IconEyeCheck,
      title: t('session.attendance.title'),
      description: session.isObligatory
        ? t('path.required.title')
        : t('general:optional'),
      visible: true,
    },
    {
      Icon: IconCalendarExclamation,
      title: t('session.detail.date'),
      description: session?.localDate,
      visible: !!session?.localDate,
    },
    {
      Icon: IconClock,
      title: t('session.detail.schedule'),
      description: `${t('general:time_range', { start: session?.startTime, end: session?.endTime })} • ${timezoneInfo}`,
      visible: !!session?.startTime && !!session?.endTime,
    },
    {
      Icon: IconMapPin,
      title: t('session.detail.location'),
      description: session?.address,
      visible: !!session?.address,
    },
    {
      Icon: IconLink,
      title: t('session.detail.link'),
      description: (
        <Link
          href={session?.meetingLink ?? ''}
          target="_blank"
          rel="noreferrer"
          sx={{
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            display: 'inline-block',
          }}
        >
          {session?.meetingLink}
        </Link>
      ),
      visible: !!session?.meetingLink,
    },
    {
      Icon: IconCertificate,
      title: t('session.detail.certificate'),
      visible: !!session?.issueCertificate,
    },
  ];

  return (
    <CardContainer fullWidth>
      <Stack sx={{ gap: 2 }}>
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          color={palette.new.text.neutral.lighter}
        >
          {t('common.details')}
        </Typography>
        <Stack sx={{ gap: 1, '& svg': { m: 0.5, mr: 1 } }}>
          {items.map(item => (
            <Property
              key={item.title}
              variant="S"
              {...item}
            />
          ))}
        </Stack>
      </Stack>
    </CardContainer>
  );
};
