import {
  type GetDrawerConfiguration,
  useDrawerV2,
} from '@material-hu/hooks/useDrawerV2';
import Stack from '@material-hu/mui/Stack';

import { useLokaliseTranslation } from 'src/utils/i18n';

import CourseBlockedAlert from '../../courses/components/CourseBlockedAlert';
import CourseDetail from '../../courses/components/CourseDetail';

export type CoursePreviewDrawerProps = {
  isBlocked: boolean;
  onNavigate: () => void;
};

const useCoursePreviewDrawer = (courseId: number) => {
  const { t } = useLokaliseTranslation('learning');

  const getDrawerConfiguration: GetDrawerConfiguration<
    CoursePreviewDrawerProps
  > = props => {
    const exitButtonProps = {
      children: t('general:exit'),
      onClick: () => closeCoursePreviewDrawer(),
      sx: { width: '100%' },
    };

    const navigateButtonProps = {
      children: t('course.go'),
      onClick: () => props.onNavigate(),
      sx: { width: '100%' },
    };

    return {
      ...props,
      title: t('path.courses.information'),
      primaryButtonProps: props.isBlocked
        ? exitButtonProps
        : navigateButtonProps,
      secondaryButtonProps: props.isBlocked ? undefined : exitButtonProps,
      children: (
        <Stack
          sx={{
            justifyContent: 'space-between',
            height: '100%',
            gap: 2,
          }}
        >
          <CourseDetail courseId={courseId} />
          {props.isBlocked && <CourseBlockedAlert />}
        </Stack>
      ),
    };
  };

  const {
    drawer: coursePreviewDrawer,
    showDrawer: showCoursePreviewDrawer,
    closeDrawer: closeCoursePreviewDrawer,
  } = useDrawerV2<CoursePreviewDrawerProps>(getDrawerConfiguration);

  return {
    coursePreviewDrawer,
    showCoursePreviewDrawer,
    closeCoursePreviewDrawer,
  };
};

export default useCoursePreviewDrawer;