import { computed } from 'vue'
import { markRaw, isReactive, type Component } from 'vue'
import api from '@/composables/IvyFormAPI'
import { useProFeatures } from '@/composables/useProFeatures'
import type { AdvancedStyleSectionEntry } from '@/types/advanced-style-section'

const ADVANCED_STYLE_SECTIONS_HOOK = 'ivyforms/style/filter/advanced_style_sections'

const normalizeSectionComponent = (component: Component): Component =>
  isReactive(component) ? markRaw(component) : component

export function resolveAdvancedStyleExtensionSections(): AdvancedStyleSectionEntry[] {
  const sections = api.hooks.applyFilters<AdvancedStyleSectionEntry[]>(
    ADVANCED_STYLE_SECTIONS_HOOK,
    [],
  )

  if (!Array.isArray(sections)) {
    return []
  }

  return sections.map((section) => ({
    ...section,
    component: normalizeSectionComponent(section.component),
  }))
}

export function getAdvancedStyleSectionKey(
  section: AdvancedStyleSectionEntry,
  index: number,
): string {
  return section.meta?.id ?? section.meta?.feature ?? `advanced-style-section-${index}`
}

export function useAdvancedStyleExtensionSections() {
  const proInstance = window.IvyForms?.pro ? useProFeatures() : null

  const extensionSections = computed(() => {
    // Re-resolve when Pro registers additional style section filters.
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    api.hooks.updateCounter.value

    if (proInstance) {
      // Re-resolve when license features finish loading (Essentials vs Growth).
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      proInstance.loaded.value
    }

    return resolveAdvancedStyleExtensionSections()
  })

  return {
    extensionSections,
    getAdvancedStyleSectionKey,
  }
}