import { type CSSProperties, forwardRef } from 'react';

import { IconGripVertical } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuImage from '@material-hu/components/composed-components/Image';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

import defaultCourseCover from 'src/assets/defaultCourseCover.webp';
import { getDurationTime } from 'src/pages/dashboard/Learning/common/utils';
import { type PathCourse } from 'src/pages/dashboard/Learning/Paths/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CoursesListActions from './CoursesListActions';

type CoursesListItemProps = {
  course: PathCourse;
  isOverlay?: boolean;
  styles?: CSSProperties;
  isRevision?: boolean;
};

export const CoursesListItem = forwardRef<HTMLDivElement, CoursesListItemProps>(
  ({ course, isOverlay, styles, isRevision, ...draggableProps }, ref) => {
    const { palette } = useTheme();
    const { t } = useLokaliseTranslation('learning');

    return (
      <div
        ref={ref}
        style={styles || {}}
      >
        <HuCardContainer
          fullWidth
          sx={{
            '& .MuiCardContent-root': {
              display: 'flex',
              flexDirection: 'row',
              width: '100%',
              gap: 1.5,
              ...(isOverlay && {
                backgroundColor: palette.hugoBackground?.neutralBgSecondary,
              }),
            },
          }}
        >
          {!isRevision && (
            <IconButton
              {...draggableProps}
              sx={{ cursor: isOverlay ? 'grabbing' : 'grab' }}
            >
              <IconGripVertical />
            </IconButton>
          )}
          <HuImage
            src={course.coverImage}
            defaultSrc={defaultCourseCover}
            aspectRatio="2/1"
            sx={{ width: 120, height: 60 }}
          />
          <Stack
            sx={{ width: '100%', justifyContent: 'center', maxWidth: '60%' }}
          >
            <HuTitle
              variant="M"
              overflow="tooltip"
              withEllipsis
              title={course.title}
              description={getDurationTime(t, course.durationTime)}
              copetin={course.categoryName}
            />
          </Stack>
          {!isRevision && <CoursesListActions courseId={course.courseId} />}
        </HuCardContainer>
      </div>
    );
  },
);

CoursesListItem.displayName = 'CoursesListItem';

export default CoursesListItem;
