import { computed, type Component } from 'vue'
import api from '@/composables/IvyFormAPI'
import { useFormBuilder } from '@/stores/useFormBuilder'
import type { FormBuilderCanvasPlacement } from '@/extensions/formBuilderExtensions'

export type { FormBuilderCanvasPlacement }

const CANVAS_HOOKS: Record<FormBuilderCanvasPlacement, { enabled: string; components: string }> = {
  prepend: {
    enabled: 'ivyforms/form_builder/canvas_prepend_enabled',
    components: 'ivyforms/form_builder/canvas_prepend',
  },
  append: {
    enabled: 'ivyforms/form_builder/canvas_append_enabled',
    components: 'ivyforms/form_builder/canvas_append',
  },
}

export function useFormBuilderCanvasSection(placement: FormBuilderCanvasPlacement) {
  const formBuilderStore = useFormBuilder()

  const sections = computed((): Component[] => {
    void api.hooks.updateCounter.value
    void formBuilderStore.formType

    const hooks = CANVAS_HOOKS[placement]
    const enabled = api.hooks.applyFilters(
      hooks.enabled,
      false,
      formBuilderStore.formType,
    ) as boolean
    if (!enabled) {
      return []
    }

    const injected = api.hooks.applyFilters(hooks.components, []) as unknown
    return Array.isArray(injected) ? (injected.filter(Boolean) as Component[]) : []
  })

  return { sections }
}