import { getComponentSettings } from '@/core/settings'
import { ComponentMetadata } from '../component'

export const componentSettingsMixin = Vue.extend({
  props: {
    componentData: {
      type: Object as () => ComponentMetadata,
      required: true,
    },
  },
  data() {
    return {
      settings: getComponentSettings(this.componentData),
    }
  },
})
export const virtualScrollMixin = (containerSelector: string) =>
  Vue.extend({
    data() {
      return {
        virtual: false,
      }
    },
    async mounted() {
      const { dq } = await import('@/core/utils')
      const { visibleInside } = await import('@/core/observer')
      const element = this.$el as HTMLElement
      const container = dq(containerSelector) as HTMLElement
      if (!container) {
        console.warn('virtual container not found, virtual scroll will be disabled!')
        return
      }
      visibleInside(element, container, '150% 0px', records => {
        records.forEach(record => {
          this.virtual = !record.isIntersecting
        })
      })
    },
  })