import { useCallback, useLayoutEffect, useRef, useState } from "react";

type UseScrollLockOptions = {
  element?: HTMLElement;
};

/**
 *
 * @kind 10-Scroll
 */
export const useScrollLock = (locked?: boolean, options: UseScrollLockOptions = {}) => {
  const { element } = options;

  const [isLocked, setIsLocked] = useState(false);
  const unlock = useRef<VoidFunction | null>(null);

  const lock = useCallback(() => {
    if (unlock.current) return;
    const lockedElement = element || document.body;
    const originalStyle = window.getComputedStyle(lockedElement).overflow;
    lockedElement.style.overflow = "hidden";
    setIsLocked(true);
    unlock.current = () => {
      setIsLocked(false);
      document.body.style.overflow = originalStyle;
    };
    return unlock?.current();
  }, [element]);

  useLayoutEffect(() => {
    if (locked) {
      return lock();
    }
  }, [lock, locked]);

  return {
    locked: isLocked,
    lock,
    unlock,
  };
};