import type { Directive } from 'vue-demi'
import SmoothScrollbar from 'smooth-scrollbar'
import type Scrollbar from 'smooth-scrollbar'
import { directiveHooks, isClient } from '../shared'
import type { ScrollbarOptions } from '../types'

const directiveWeakMap = new WeakMap<HTMLElement, Scrollbar>()

/**
 * Vue directive for `smooth-scrollbar`
 */
export const vScrollbar: Directive<HTMLElement, ScrollbarOptions | undefined> = {

  [directiveHooks.mounted](el: HTMLElement, { value }) {
    if (!directiveWeakMap.has(el) && isClient) {
      directiveWeakMap.set(el, SmoothScrollbar.init(el, value))

      // from smooth-vuebar
      el.dispatchEvent(new CustomEvent('scrollbar-mounted', {
        detail: directiveWeakMap.get(el),
      }))
    }
  },

  [directiveHooks.unmounted](el: HTMLElement) {
    if (directiveWeakMap.has(el)) {
      directiveWeakMap.get(el)!.destroy()
      directiveWeakMap.delete(el)

      // from smooth-vuebar
      el.dispatchEvent(new CustomEvent('scrollbar-unmounted', { detail: el }))
    }
  },
}