import { useCallback, useEffect } from 'react';

export const useCloseOnEscape = (
  onRequestClose?: () => void,
  ignoreInputs = false,
) => {
  const onEscape = useCallback(
    (event) => {
      if (event.key !== 'Escape' || !onRequestClose) return;
      if (
        !ignoreInputs &&
        (event.target.tagName === 'INPUT' ||
          event.target.tagName === 'TEXTAREA')
      )
        return;

      onRequestClose();
    },
    [ignoreInputs, onRequestClose],
  );

  useEffect(() => {
    document.addEventListener('keyup', onEscape);

    return () => {
      document.removeEventListener('keyup', onEscape);
    };
  }, [onEscape]);
};

export const useDelayedReady = (
  setReady: (val: boolean) => void,
  delay: number = 500,
) => {
  useEffect(() => {
    const timer = setTimeout(() => setReady(true), delay);

    return () => {
      if (timer) clearTimeout(timer);
    };
  }, [delay, setReady]);
};

/**
 * useDropZone returns onDrop handler to upload files
 * @param onUpload -- upload callback
 * @param allowedTypes -- list of allowed types
 */
export const useFileDropZone = (
  onUpload: (file: File[]) => void,
  allowedTypes?: string[],
) => {
  return useCallback(
    (event) => {
      event.preventDefault();
      event.stopPropagation();

      const files: File[] = Array.from(
        (event.dataTransfer?.files as File[]) || [],
      ).filter(
        (file: File) =>
          file?.type && (!allowedTypes || allowedTypes.includes(file.type)),
      );

      if (!files || !files.length) return;

      onUpload(files);
    },
    [allowedTypes, onUpload],
  );
};
