import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

import useLocalStorage from 'src/hooks/useLocalStorage';
import useTimeout from 'src/hooks/useTimeout';

import { CERTIFICATES_FEATURE_MODAL_STORAGE_KEY } from '../../Create/constants';

import CertificatesNewFeatureDialog from './CertificatesNewFeatureDialog';

const DIALOG_ID = 'certificates-new-feature-dialog';

const useCertificatesNewFeatureDialog = () => {
  const { openDialog, closeDialog } = useDialogLayer();
  const [hasSeen, setHasSeen] = useLocalStorage<boolean>(
    CERTIFICATES_FEATURE_MODAL_STORAGE_KEY,
    false,
  );

  const handleClose = () => {
    setHasSeen(true);
    closeDialog(DIALOG_ID);
  };

  useTimeout(() => {
    if (!hasSeen) {
      openDialog(
        {
          content: <CertificatesNewFeatureDialog onClose={handleClose} />,
          dialogProps: {
            fullWidth: true,
            maxWidth: false,
            PaperProps: {
              sx: {
                width: 540,
                maxHeight: 'none',
                '& .MuiDialogContent-root': {
                  overflow: 'visible',
                  pt: 0,
                  px: 0,
                },
              },
            },
          },
        },
        DIALOG_ID,
      );
    }
  }, 2000);
};

export default useCertificatesNewFeatureDialog;