import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/stores/main'
import { useHtmlConverter } from '@/composables/useHtmlConverter'

export function usePageContentRenderer() {
  const { locale } = useI18n()
  const mainStore = useMainStore()
  const { pagecontents } = storeToRefs(mainStore)
  const { convertToHTML } = useHtmlConverter()

  // Hole die Inhalte für section und aktuelle Sprache, fallback auf de oder erstes Item
  const getHtmlBySection = (section: string, prepend?: string) => {
    return computed(() => {
      if (!pagecontents.value?.length) return ''

      // Filter alle Items mit der gesuchten section
      const sectionItems = pagecontents.value.filter(c => c.section === section)
      if (!sectionItems.length) return ''

      // Suche Item passend zur aktuellen Sprache
      let contentBlock = sectionItems.find(c => c.locale === locale.value)

      // Falls nicht gefunden, fallback auf deutsch
      if (!contentBlock) contentBlock = sectionItems.find(c => c.locale === 'de')

      // Wenn immer noch nichts, fallback auf erstes Item mit der section
      if (!contentBlock) contentBlock = sectionItems[0]

      if (!contentBlock?.content) return ''

      // content ist Array von RichTextBlöcken, convertiere zu HTML
      return convertToHTML(contentBlock.content, prepend)
    })
  }

  return { getHtmlBySection }
}