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

// install composition-api plugin
install()

export const Scrollbar = /* #__PURE__ */ defineComponent({
  name: 'Scrollbar',
  props: {
    as: {
      type: String as PropType<string>,
      default: 'div',
      required: false,
    },
    scrollbarOptions: {
      type: Object as PropType<ScrollbarOptions>,
      required: false,
    },
  },
  emits: [
    'mounted',
  ],
  setup(props, { emit }) {
    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)!,
      })
    })

    return {
      target,
      scrollbar,
    }
  },
  render() {
    // @ts-expect-error this.$listeners
    return h(this.$props.as || 'div', { ref: 'target', on: this.$listeners, ...this.$attrs }, this.$slots.default && this.$slots.default)
  },
})