import {
  nextTick,
  onActivated,
  onDeactivated,
  onMounted,
  onUnmounted,
  ref,
} from "vue";

export type ViewStackProps = (...args: any) => (() => any) | void;

export const useViewStack = (hook: ViewStackProps) => {
  let destroy: ReturnType<ViewStackProps>;
  let isRun = false

  const deHandler = () => {
    if (isRun) {
      destroy && destroy();
      destroy = undefined;
      isRun = false
    }
  };
  const handler = () => {
    nextTick(() => {
      if (!isRun) {
        isRun = true
        destroy = hook();
      }
    });
  };

  onActivated(handler);
  onMounted(handler);
  onDeactivated(deHandler);
  onUnmounted(deHandler);
};

export const useActive = () => {
  const active = ref(true)
  useViewStack(() => {
    active.value = true
    return () => active.value = false
  })
  return active
}