import { defineComponent, h, onMounted, provide, shallowRef, unref } from 'vue-demi'
import type { PropType, VNode } from 'vue-demi'
import type SmoothScrollbar from 'smooth-scrollbar'
import { useScrollbar } from '../composables'
import type { MountedEmitPayload, ScrollbarOptions } from '../types'
import { smoothScrollbarKey } from '../shared'

export const ScrollbarComponent = /* #__PURE__ */ defineComponent({
  name: 'Scrollbar',
  props: {
    as: {
      type: String as PropType<string>,
      default: 'div',
      required: false,
    },
    scrollbarOptions: {
      type: Object as PropType<ScrollbarOptions>,
      required: false,
    },
  },
  emits: {
    // @ts-expect-error payload
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    mounted: (payload: MountedEmitPayload) => true,
  },
  setup(props, { emit, expose, slots }) {
    const target = shallowRef<HTMLElement | null>(null)
    const scrollbar = useScrollbar(target, props.scrollbarOptions)

    // add scrollbar to context
    provide(smoothScrollbarKey, scrollbar)

    onMounted(() => {
      /** good for integrate with gsap and ScrollTrigger */
      emit('mounted', {
        target,
        scrollbar: unref(scrollbar)!,
      })
    })

    // expose not supported in vue 2.6.14 =>
    expose({
      scrollbar,
    })

    return () => {
      // element wrappers only works in vue3 with smooth-scrollbar appendChild
      // return h(props.as || 'div', { ref: target },
      // wrapper ==>   h('div',
      //     slots.default && slots.default(),
      //   ),
      // )
      return h(props.as || 'div', { ref: target }, slots.default && slots.default())
    }
  },
})

export const Scrollbar = ScrollbarComponent as typeof ScrollbarComponent & {
  new (): {
    scrollbar: SmoothScrollbar
    $slots: {
      default: () => VNode[]
    }
  }
}