function createDirectiveHooks(
  cleanupOnUnmount = false,
  options?: {
    mountedCallback?: (el: HTMLElement, binding: DirectiveBinding) => void
    unmountedCallback?: (el: HTMLElement) => void
  },
) {
  const isFunc = (fn: unknown) => {
    return typeof fn === 'function'
  }
  const { mountedCallback, unmountedCallback } = options ?? {}

  const vDirectiveScopes = new WeakMap<HTMLElement, EffectScope>()

  return {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
      if (!cleanupOnUnmount) {
        if (isFunc(mountedCallback))
          mountedCallback(el, binding)
        return
      }
      const scope = vDirectiveScopes.get(el) ?? effectScope()
      vDirectiveScopes.set(el, scope)
      scope.run(() => {
        if (isFunc(mountedCallback))
          mountedCallback(el, binding)
      })
    },
    unmounted(el: HTMLElement) {
      if (cleanupOnUnmount) {
        vDirectiveScopes.get(el)?.stop()
        vDirectiveScopes.delete(el)
      }

      if (isFunc(unmountedCallback))
        unmountedCallback(el)
    },
  }
}

export const vElementHover: ObjectDirective<
  HTMLElement,
  BindingValueFunction | [handler: BindingValueFunction, options: UseElementHoverOptions]
> = {
  // mounted(el, binding) {
  //   const scope = vElementHoverScopes.get(el) ?? effectScope()
  //   vElementHoverScopes.set(el, scope)
  //   scope.run(() => {
  //     const value = binding.value
  //     if (typeof value === 'function') {
  //       const isHovered = useElementHover(el)
  //       watch(isHovered, v => value(v))
  //     }
  //     else {
  //       const [handler, options] = value
  //       const isHovered = useElementHover(el, options)
  //       watch(isHovered, v => handler(v))
  //     }
  //   })
  // },
  // unmounted(el) {
  //   vElementHoverScopes.get(el)?.stop()
  //   vElementHoverScopes.delete(el)
  // },
  ...createDirectiveHooks(
    true,
    {
      mountedCallback: (el, binding) => {
        const value = binding.value
        if (typeof value === 'function') {
          const isHovered = useElementHover(el)
          watch(isHovered, v => value(v))
        }
        else {
          const [handler, options] = value
          const isHovered = useElementHover(el, options)
          watch(isHovered, v => handler(v))
        }
      },
    },
  ),
}