import { IconInfoCircle, IconTrash } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { queryClient } from 'src/config/react-query';
import { coursesKeys } from 'src/pages/dashboard/Learning/Courses/queries';
import { getCourse } from 'src/pages/dashboard/Learning/Courses/services';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { sToMs } from 'src/utils/timeUtils';

import useDeleteCourseDialog from './hooks/useDeleteCourseDialog';
import useSeeCourseDrawer from './hooks/useSeeCourseDrawer';

type CoursesListActionsProps = {
  courseId: number;
};

const CoursesListActions = ({ courseId }: CoursesListActionsProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { deleteCourseDialog, showDeleteCourseDialog } =
    useDeleteCourseDialog(courseId);

  const { drawer: seeCourseDrawer, showDrawer: showSeeCourseDrawer } =
    useSeeCourseDrawer(courseId);

  const handlePrefetchCourse = async () => {
    await queryClient.prefetchQuery({
      queryKey: coursesKeys.detail.course(courseId),
      queryFn: () => getCourse(courseId),
      staleTime: sToMs(120),
    });
  };

  return (
    <>
      {deleteCourseDialog}
      {seeCourseDrawer}
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          ml: 'auto',
          gap: 1,
        }}
      >
        <HuTooltip
          direction="bottom"
          title={t('path.courses.view_content')}
        >
          <IconButton
            onClick={showSeeCourseDrawer}
            onMouseEnter={handlePrefetchCourse}
            aria-label={t('path.courses.view_content')}
          >
            <IconInfoCircle />
          </IconButton>
        </HuTooltip>
        <HuTooltip
          direction="bottom"
          title={t('path.courses.delete.action')}
        >
          <IconButton
            onClick={showDeleteCourseDialog}
            aria-label={t('path.courses.delete.action')}
          >
            <IconTrash />
          </IconButton>
        </HuTooltip>
      </Stack>
    </>
  );
};

export default CoursesListActions;
