import { onMounted, ref, watchEffect } from 'vue'
import type { Directive, Plugin, Ref } from 'vue'
import type {
  AnimationController,
  AutoAnimateOptions,
  AutoAnimationPlugin,
} from '@formkit/auto-animate'
import autoAnimate, { vAutoAnimate as autoAnimateDirective,
} from '@formkit/auto-animate'

export const vAutoAnimate: Directive<
  HTMLElement,
  Partial<AutoAnimateOptions>
> = autoAnimateDirective

export const autoAnimatePlugin: Plugin = {
  install(app) {
    app.directive('auto-animate', vAutoAnimate)
  },
}

export type ElementOrComponentRef<T extends Element> = T & { $el?: Element }

/**
 * AutoAnimate hook for adding dead-simple transitions and animations to Vue.
 * @param options - Auto animate options or a plugin
 * @returns A template ref. Use the `ref` attribute of your parent element
 * to store the element in this template ref.
 */
export function useAutoAnimate<T extends Element>(
  options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin,
): [Ref<ElementOrComponentRef<T>>, (enabled: boolean) => void] {
  const element = ref<ElementOrComponentRef<T>>()
  let controller: AnimationController | undefined
  function setEnabled(enabled: boolean) {
    if (controller)
      enabled ? controller.enable() : controller.disable()
  }
  onMounted(() => {
    watchEffect(() => {
      const el = element.value?.$el || element.value
      if (el instanceof HTMLElement)
        controller = autoAnimate(el, options || {})
    })
  })

  return [element as Ref<T>, setEnabled]
}