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

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

import defaultPathImg from 'src/assets/svg/defaultPathImg.svg';
import useFormatDate from 'src/hooks/useFormatDate';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getDurationTime } from 'src/utils/time';

import { RIGHT_DETAILS_WIDTH } from '../../constants';
import { type Path } from '../../types';

import PathStartButton from './PathStartButton';

export type PathInformationProps = { path: Path };

const PathInformation = ({ path }: PathInformationProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { formatDate } = useFormatDate();
  const { palette } = useTheme();

  const properties = [
    {
      Icon: IconCalendarExclamation,
      title: t('common.due_date_title'),
      description: path.dueDate ? formatDate(path.dueDate) : '--',
      visible: !!path.dueDate,
    },
    {
      Icon: IconEyeCheck,
      title: t('common.type'),
      description: path.isObligatory
        ? t('path.required.title')
        : t('path.optional'),
      visible: true,
    },
    {
      Icon: IconClock,
      title: t('common.duration_title'),
      description: getDurationTime(path.durationTime),
      visible: !!path.durationTime,
    },
    {
      Icon: IconCertificate,
      title: t('common.with_certificate'),
      visible: !!path.issueCertificate,
    },
  ];

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'start',
        justifyContent: 'space-between',
        gap: 3,
      }}
    >
      <Stack sx={{ gap: 3, alignItems: 'flex-start' }}>
        <TextInformation
          variant="XL"
          copetin={t('path.title_long_single').toUpperCase()}
          title={path.title}
          description={path.description}
          sx={{ width: '100%' }}
        />
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 1.5,
            color: palette.new.text.neutral.default,
          }}
        >
          {properties.map(property => (
            <Property
              key={property.title}
              {...property}
            />
          ))}
        </Stack>
        <PathStartButton path={path} />
      </Stack>
      <Image
        src={path.pictureUrl}
        defaultSrc={defaultPathImg}
        sx={{
          maxWidth: RIGHT_DETAILS_WIDTH,
          minWidth: RIGHT_DETAILS_WIDTH,
        }}
      />
    </Stack>
  );
};

export default PathInformation;