<template>
  <component v-if="isText && hasTextValue && wrapTag" :is="wrapTag">
    {{ textValue }}
  </component>

  <template v-else-if="isText && hasTextValue">
    {{ textValue }}
  </template>

  <component v-else-if="isList" :is="listTag">
    <StrapiBlockChildsConvert
      v-for="(child, i) in children"
      :key="i"
      :node="child"
    />
  </component>

  <li v-else-if="isListItem">
    <StrapiBlockChildsConvert
      v-for="(child, i) in children"
      :key="i"
      :node="child"
    />
  </li>

  <a
    v-else-if="isLink"
    :href="href"
    class="strapi-inline__link"
    rel="noopener noreferrer"
    target="_self"
  >
    <StrapiBlockChildsConvert
      v-for="(child, i) in children"
      :key="i"
      :node="child"
    />
  </a>

  <template v-else>
    <StrapiBlockChildsConvert
      v-for="(child, i) in children"
      :key="i"
      :node="child"
    />
  </template>
</template>

<script setup>
    import { computed } from 'vue'

    const props = defineProps({
      node: { type: Object, required: true },
    })

    const isText = computed(() => props.node?.type === 'text')
    const isLink = computed(() => props.node?.type === 'link')
    const isList = computed(() => props.node?.type === 'list')
    const isListItem = computed(() => props.node?.type === 'list-item')
    const children = computed(() => props.node?.children || [])
    const listTag = computed(() => (
      props.node?.format === 'ordered' ? 'ol' : 'ul'
    ))

    const textValue = computed(() => (props.node?.text ?? '').toString())
    const hasTextValue = computed(() => textValue.value.length > 0)

    // Dans Strapi blocks, les liens peuvent être "url" ou "href" selon les versions/plugins
    const href = computed(() => props.node?.url || props.node?.href || '#')

    /**
     * Gestion des "marks" (bold/italic/underline/...)
     * Ici on choisit une stratégie simple : UN seul wrapper.
     * -> si tu veux combiner plusieurs marks (bold + italic), on le fait après.
     */
    const wrapTag = computed(() => {
        const n = props.node || {}
        if (!isText.value) return null

        if (n.code) return 'code'
        if (n.bold) return 'strong'
        if (n.italic) return 'em'
        if (n.underline) return 'u'
        if (n.strikethrough) return 's'
        return null
    })
</script>

<style lang="scss">

</style>
