import { useFormContext } from 'react-hook-form';

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

import { InformationRow } from 'src/pages/dashboard/Learning/common/components/InformationRow';
import { RevisionAccordion } from 'src/pages/dashboard/Learning/common/components/RevisionAccordion';
import { SessionSteps } from 'src/pages/dashboard/Learning/Sessions/constants';
import { type NewSessionFormValues } from 'src/pages/dashboard/Learning/Sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const SessionConfiguration = () => {
  const { t } = useLokaliseTranslation(['learning', 'forms']);
  const { getValues } = useFormContext<NewSessionFormValues>();

  const configuration = getValues('configuration');

  const data = [
    {
      title: t(`session.type.title_one`),
      description:
        configuration.type === 'PRESENTIAL'
          ? t(`session.type.presential_one`)
          : t(`session.type.virtual_one`),
    },
    {
      title: t(`session.detail.location`),
      description: configuration.address || '-',
      enabled: !!configuration.address,
    },
    {
      title: t(`session.detail.link`),
      description: (
        <Link
          href={configuration.meetingLink!}
          target="_blank"
          rel="noopener noreferrer"
          sx={{
            textAlign: 'right',
            display: '-webkit-box',
            WebkitLineClamp: 2,
          }}
        >
          {configuration.meetingLink}
        </Link>
      ),
      enabled: !!configuration.meetingLink,
    },
    {
      title: t(`session.detail.instructor`),
      description: configuration.collaborator || '-',
    },
    {
      title: t(`session.attendance.title`),
      description: configuration.isObligatory
        ? t('forms:mandatory')
        : t('general:optional'),
    },
    {
      title: t(`general:notifications`),
      description: configuration.sendNotification
        ? t(`common.notifications`)
        : t(`session.notification.revision.none`),
    },
  ].filter(item => item.enabled ?? true);

  return (
    <RevisionAccordion
      step={SessionSteps.CONFIGURATION}
      place="sessions"
    >
      {data.map(item => (
        <InformationRow
          key={item.title}
          title={item.title}
          description={item.description}
        />
      ))}
    </RevisionAccordion>
  );
};