import { useCallback, useEffect, useRef, useState } from 'react';

/**
 * 生成一个自定义钩子，用于管理模态框的可见性状态。
 *
 * @param initialValue - 模态框的初始可见性状态。
 * @return 一个数组，包含 visible、打开函数、关闭函数和 visible ref。
 */
export function useVisible(initialValue: boolean) {
  const [visible, setVisible] = useState(initialValue);
  const ref = useRef(initialValue);

  const open = useCallback(() => {
    setVisible(true);
  }, []);

  const close = useCallback(() => {
    setVisible(false);
  }, []);

  useEffect(() => {
    ref.current = visible;
  }, [visible]);

  return [visible, open, close, ref] as const;
}
