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

import { TextInformation } from '@material-hu/components/composed-components/learning';

import useFormatDate from 'src/hooks/useFormatDate';
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';
import { getTimeZoneInfo } from 'src/utils/timeUtils';

import BeforeTodayAlert from '../BeforeTodayAlert';

export const SessionBasicInformation = () => {
  const { t } = useLokaliseTranslation(['learning', 'service_management']);
  const { getValues } = useFormContext<NewSessionFormValues>();
  const { formatDate } = useFormatDate();

  const { timeZone, localDate, startTime, description, title } =
    getValues('basic_information');

  const timeZoneInfo = getTimeZoneInfo(timeZone);
  const formattedDate = localDate
    ? `${formatDate(localDate, 'dd/MMM/yyyy')}`.toUpperCase()
    : undefined;
  const formattedTime = startTime
    ? `${formatDate(startTime, 'HH:mm')} ${t('general:hours_short')}`
    : undefined;

  const data = [
    {
      title: t(`session.name`),
      description: title,
    },
    {
      title: t(`common.description`),
      description: description,
      enabled: !!description,
    },
    {
      title: t(`service_management:date_and_time`),
      description:
        `${formattedDate} - ${formattedTime} • ${timeZoneInfo}` || '',
      footer: (
        <BeforeTodayAlert
          localDate={localDate}
          startTime={startTime}
          timeZone={timeZone}
        />
      ),
    },
  ].filter(item => item.enabled ?? true);

  return (
    <RevisionAccordion
      step={SessionSteps.BASIC_INFORMATION}
      place="sessions"
    >
      {data.map(item => (
        <InformationRow
          key={item.title}
          title={item.title}
          description={
            <TextInformation
              description={item.description || ''}
              slotProps={{ seeMoreText: { lines: 5 } }}
              sx={{
                maxWidth: '70%',
                textAlign: 'right',
                '& button': {
                  alignSelf: 'end',
                  '&:hover': { backgroundColor: 'transparent' },
                },
              }}
            />
          }
          footer={item.footer}
        />
      ))}
    </RevisionAccordion>
  );
};
