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

/** Resolves the options-tab panel for the currently selected canvas extension block. */
export function useFormBuilderExtensionSettingsPanel() {
  const formBuilderStore = useFormBuilder()

  return computed((): Component | null => {
    void api.hooks.updateCounter.value

    const sel = formBuilderStore.selectedBuilderEntity
    if (!sel || sel.kind !== 'canvas') {
      return null
    }

    const ext = getFormBuilderExtension(sel.id)
    if (!ext?.settingsPanelContext) {
      return null
    }

    const resolved = api.hooks.applyFilters(
      'ivyforms/form_builder/settings_panel_component',
      null,
      {
        context: ext.settingsPanelContext,
        formType: formBuilderStore.formType,
        extensionId: ext.id,
      },
    )

    return (resolved as Component | null) ?? null
  })
}