import { useAsyncState, tryOnScopeDispose } from '@vueuse/core';
import { watch, ref, effectScope } from 'vue';

export function watchCreateEffectScope(
  watchSource,
  effectScopeFn,
  defaultEffectState = null,
  { immediate = true, ...options } = {}
) {
  let effState = ref(null);
  let effScope;

  const dispose = () => {
    effScope && effScope.stop();
    effState.value = null;
  };

  watch(
    watchSource,
    (newWatchedValue) => {
      try {
        dispose(); // first, dispose any previously loaded effect

        effScope = effectScope();
        const composable = () => effectScopeFn(newWatchedValue);
        effState.value = effScope.run(composable);
      } catch (error) {
        console.error('Failed to load composable:', error);
        return defaultEffectState;
      }
    },
    { immediate, ...options }
  );

  tryOnScopeDispose(dispose);

  return effState;
}