import { shallowRef, toRaw, unref, watchPostEffect } from 'vue-demi'
import SmoothScrollbar from 'smooth-scrollbar'
import type Scrollbar from 'smooth-scrollbar'
import { isClient } from '../shared'
import type { ScrollbarOptions, TargetRefOrShallowRef } from '../types'

/**
 * Create `smooth-scrollbar` with composable and watch for `target` changes
 */
export /* #__PURE__ */ function useScrollbar(target: TargetRefOrShallowRef, options?: ScrollbarOptions) {
  const scrollbarRef = shallowRef<Scrollbar>()

  // this will watch reactive dependencies, will ignore options change cause toRaw
  watchPostEffect((onCleanup) => {
    if (isClient)
      scrollbarRef.value = SmoothScrollbar.init(unref(target)!, toRaw(unref(options)))

    onCleanup(() => {
      if (scrollbarRef.value)
        scrollbarRef.value.destroy()
    })
  })

  return scrollbarRef
}