import { useNavigate } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import Pills from '@material-hu/components/design-system/Pills';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';
import Title from '@material-hu/components/design-system/Title';

import useFormatDate from 'src/hooks/useFormatDate';
import { coursesRoutes } from 'src/pages/dashboard/Learning/Courses/routes';
import { type Category } from 'src/pages/dashboard/Learning/Settings/Categories/types';
import { formatCategoryLabel } from 'src/pages/dashboard/Learning/Settings/Categories/utils';
import { CopyTypePath } from 'src/types/deeplinks';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CopyLink, {
  copyLinkContainerStyle,
} from 'src/components/CopyLink/CopyLink';

import { type CourseListItem, CourseStatus } from '../../../types';
import { getCourseStatusType } from '../../utils';

import CoursesTableRowActions from './CoursesTableRowActions';

type CoursesTableRowProps = {
  course: CourseListItem;
};

const CoursesTableRow = ({ course }: CoursesTableRowProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const { formatDate } = useFormatDate();
  const navigate = useNavigate();

  const handleClick = () =>
    course.status === CourseStatus.DRAFT
      ? navigate(coursesRoutes.draftCourse(course.id), {})
      : navigate(coursesRoutes.editCourse(course.id), {
          state: { searchParams: location.search },
        });

  const categoriesFields: { category?: Category; showChildren: boolean }[] = [
    {
      category: course.category,
      showChildren: false,
    },
    {
      category: course.category?.children?.[0],
      showChildren: true,
    },
  ];

  return (
    <TableRow
      onClick={handleClick}
      sx={{
        '&:hover td': {
          backgroundColor: palette.new.background.layout.tertiary,
        },
        '& > td': { textWrap: 'auto' },
        ...copyLinkContainerStyle,
      }}
    >
      <TableCell
        scope="row"
        sx={{
          position: 'sticky',
          left: 0,
          minWidth: '300px',
          zIndex: 1,
          backgroundColor: palette.new.background.layout.tertiary,
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
          <Title
            variant="S"
            withEllipsis
            overflow="tooltip"
            fontWeight="fontWeightRegular"
            title={course.title}
          />
          <CopyLink
            type={CopyTypePath.COURSE}
            id={course.id}
            IconButtonProps={{ sx: { padding: 0.5 } }}
          />
        </Stack>
        <Stack
          sx={{
            height: '100%',
            position: 'absolute',
            right: 0,
            top: 0,
            width: '2px',
            backgroundColor: palette.new.border.neutral.default,
          }}
        />
      </TableCell>
      {categoriesFields.map(item => (
        <TableCell
          key={item.category?.id}
          sx={{ maxWidth: 400, minWidth: item ? 275 : 0 }}
        >
          <Title
            variant="S"
            withEllipsis
            overflow="tooltip"
            fontWeight="fontWeightRegular"
            title={formatCategoryLabel(item.category, item.showChildren)}
          />
        </TableCell>
      ))}
      <TableCell>
        {course.status && (
          <Pills
            label={t(`general:states.${course.status.toLowerCase()}`)}
            type={getCourseStatusType(course)}
            hasIcon={false}
            size="small"
          />
        )}
      </TableCell>
      <TableCell>{`${course.totalFinished}/${course.totalAssigned}`}</TableCell>
      <TableCell>{formatDate(course.updatedAt)}</TableCell>
      <TableCell
        sx={{ color: !course.creatorName ? palette.text.secondary : undefined }}
      >
        <Title
          variant="S"
          title={course.creatorName || t('general:deleted_user')}
          fontWeight="fontWeightRegular"
          sx={{ textWrap: 'nowrap' }}
        />
      </TableCell>
      <CoursesTableRowActions course={course} />
    </TableRow>
  );
};

export default CoursesTableRow;
