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

type Callback<T> = (state: T) => void;

/**
 * 生成一个具有回调机制的可变状态值和更新它的函数。谨慎使用
 *
 * @param initialValue - 初始状态值。
 * @return 一个元组，包含当前状态值和用于更新状态的函数。
 */
export function useCallbackState<T>(initialValue: T) {
  const [state, _setState] = useState<T>(initialValue);
  const callbackQueue = useRef<Callback<T>[]>([]);
  useEffect(() => {
    callbackQueue.current.forEach((cb) => cb(state));
    callbackQueue.current = [];
  }, [state]);
  const setState = (newValue: T | ((prevState: T) => T), callback?: Callback<T>) => {
    _setState(newValue);
    if (callback && typeof callback === 'function') {
      callbackQueue.current.push(callback);
    }
  };
  return [state, setState] as const;
}