<script setup lang="ts">
import type { BlockData } from '@vigilkids/section-core'

import { computed } from 'vue'

import { useInlineEdit } from '../../../composables/useInlineEdit'

const props = defineProps<{
  blockOrder: string[]
  blocks: Record<string, BlockData>
  editorMode?: boolean
  settings: Record<string, unknown>
}>()

const emit = defineEmits<{
  (e: 'update:setting', key: string, value: unknown): void
  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
  (e: 'inline-edit-start', key: string): void
  (e: 'inline-edit-end'): void
  (e: 'undo-redo', action: 'redo' | 'undo'): void
}>()

const s = computed(() => props.settings)
const variant = computed(() => (s.value.variant as string) || 'default')

const items = computed(() =>
  props.blockOrder
    .map(id => props.blocks[id])
    .filter((b): b is BlockData => !!b && b.type === 'qa_item'),
)

const { blockEditableAttrs } = useInlineEdit({
  editorMode: () => !!props.editorMode,
  onSettingUpdate: (key, value) => emit('update:setting', key, value),
  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
  onEditStart: key => emit('inline-edit-start', key),
  onEditEnd: () => emit('inline-edit-end'),
  onUndoRedo: action => emit('undo-redo', action),
})
</script>

<template>
<!-- blog-qa-card: default -->
  <div v-if="variant === 'default'" class="blog-qa-card">
    <div
      v-for="(item, index) in items"
      :key="blockOrder[index]"
      :class="index === items.length - 1 ? 'blog-qa-item-last' : 'blog-qa-item'"
    >
      <h3 class="blog-qa-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
        {{ item.settings.question }}
      </h3>
      <div
        class="blog-qa-answer"
        v-bind="blockEditableAttrs(blockOrder[index], 'answer')"
        v-html="String(item.settings.answer || '')"
      />
    </div>
  </div>

  <!-- blog-qa-card: titled -->
  <template v-else-if="variant === 'titled'">
    <h2 class="blog-qa-title">
      {{ s.title }}
    </h2>
    <p v-if="s.intro" class="blog-qa-intro">
      {{ s.intro }}
    </p>
    <div class="blog-qa-card">
      <div
        v-for="(item, index) in items"
        :key="blockOrder[index]"
        :class="index === items.length - 1 ? 'blog-qa-item-last' : 'blog-qa-item'"
      >
        <h3
          class="blog-qa-question"
          v-bind="blockEditableAttrs(blockOrder[index], 'question')"
        >
          {{ item.settings.question }}
        </h3>
        <!-- eslint-disable-next-line vue/no-v-html -->
        <div class="blog-qa-answer" v-html="item.settings.answer" />
      </div>
    </div>
  </template>
</template>

<style scoped>
.blog-qa-card{background:#f7f8fa;border-radius:10px;font-size:14px;margin-top:40px;padding:20px 16px}.blog-qa-item{margin-bottom:24px}.blog-qa-item-last{margin-bottom:0}.blog-qa-question{font-weight:600;margin:0 0 8px}.blog-qa-answer{color:#666262;line-height:1.625;margin:0}.blog-qa-answer :deep(span){color:#000;font-weight:600}.blog-qa-title{font-size:24px;font-weight:700;margin-bottom:0;margin-top:40px}.blog-qa-intro{font-size:14px;margin-top:20px}@media (min-width:768px){.blog-qa-card{border-radius:20px;font-size:16px;padding:24px 20px}.blog-qa-title{font-size:28px}.blog-qa-intro{font-size:16px}}
</style>
