import { useModal } from '@material-hu/hooks/useModal';

import useTimeout from 'src/hooks/useTimeout';

import { SessionTutorialDialog } from '../List/components/SessionTutorialDialog';

import { useGetShowSessionsTutorial } from './useGetShowSessionsTutorial';
import { useHideSessionsTutorial } from './useHideSessionsTutorial';

const useSessionTutorialModal = () => {
  const { data: showSessionsTutorial } = useGetShowSessionsTutorial();
  const { mutate: hideSessionsTutorial } = useHideSessionsTutorial();

  const {
    showModal: showSessionTutorialModal,
    closeModal: closeSessionTutorialModal,
    modal: sessionTutorialDialog,
  } = useModal(
    SessionTutorialDialog,
    {
      fullWidth: true,
      sx: {
        '& .MuiPaper-root': { maxWidth: '540px' },
        '& .MuiDialogContent-root': { p: 0, maxHeight: 'unset' },
      },
    },
    {
      onClose: () => {
        closeSessionTutorialModal();
        hideSessionsTutorial();
      },
    },
  );

  useTimeout(() => showSessionsTutorial && showSessionTutorialModal(), 2000);

  return {
    showSessionTutorialModal,
    closeSessionTutorialModal,
    sessionTutorialDialog,
  };
};

export default useSessionTutorialModal;
