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

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

import useFormatDate from 'src/hooks/useFormatDate';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getDurationTime } from 'src/utils/time';

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

export type CourseInformationProps = {
  course: Course | undefined;
  loading?: boolean;
};

const CourseInformation = ({
  course,
  loading = false,
}: CourseInformationProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { formatDate } = useFormatDate();

  const duration = getDurationTime(course?.durationTime);

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

  return (
    <CardContainer
      fullWidth
      color="grey"
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 2.5,
        },
      }}
    >
      {loading && <TextInformation loading />}
      {!!course && !loading && (
        <TextInformation
          copetin={course.category?.name}
          title={course.title}
          description={course.body}
        />
      )}
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'flex-start',
          flexWrap: 'wrap',
          gap: 2,
        }}
      >
        {properties.map(property => (
          <Property
            key={property.title}
            loading={loading}
            {...property}
          />
        ))}
      </Stack>
    </CardContainer>
  );
};

export default CourseInformation;