<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 prosTitle = computed(() => (props.settings.pros_title as string) || 'Pros')
const consTitle = computed(() => (props.settings.cons_title as string) || 'Cons')

const prosBlocks = computed(() => props.blockOrder.filter(id => props.blocks[id]?.type === 'pro'))
const consBlocks = computed(() => props.blockOrder.filter(id => props.blocks[id]?.type === 'con'))

const { editableAttrs, 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>
<div class="blog-pros-cons">
    <!-- Pros -->
    <div v-if="prosBlocks.length > 0" class="blog-pros-cons-card pros">
      <div class="blog-pros-cons-header">
        <h3 class="blog-pros-cons-title" v-bind="editableAttrs('pros_title')">
          {{ prosTitle }}
        </h3>
      </div>
      <ul class="blog-pros-cons-list">
        <template v-for="blockId in prosBlocks" :key="blockId">
          <!-- eslint-disable-next-line vue/no-v-html -->
          <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
        </template>
      </ul>
    </div>

    <!-- Cons -->
    <div v-if="consBlocks.length > 0" class="blog-pros-cons-card cons">
      <div class="blog-pros-cons-header">
        <h3 class="blog-pros-cons-title" v-bind="editableAttrs('cons_title')">
          {{ consTitle }}
        </h3>
      </div>
      <ul class="blog-pros-cons-list">
        <template v-for="blockId in consBlocks" :key="blockId">
          <!-- eslint-disable-next-line vue/no-v-html -->
          <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
        </template>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.blog-pros-cons-card{background:#f7f8fa;border-radius:10px;flex:1;padding:20px 12px}.blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.blog-pros-cons-header:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:28px;width:28px}.blog-pros-cons-card.pros .blog-pros-cons-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/bad8fe2f52dffa98/pros.svg)}.blog-pros-cons-card.cons .blog-pros-cons-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/fe7765e509abfda1/cons.svg)}.blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;margin:0}.blog-pros-cons-list{color:#000;font-size:14px;list-style-position:inside;list-style-type:disc;margin:0;padding:0}.blog-pros-cons-list li+li{margin-top:12px}@media (min-width:768px){.blog-pros-cons{flex-direction:row;gap:24px}.blog-pros-cons-card{border-radius:20px;padding:26px 30px}}
</style>
