<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 pros = computed(() =>
  props.blockOrder
    .filter(id => props.blocks[id]?.type === 'pro')
    .map(id => ({ id, block: props.blocks[id]! })),
)

const cons = computed(() =>
  props.blockOrder
    .filter(id => props.blocks[id]?.type === 'con')
    .map(id => ({ id, block: props.blocks[id]! })),
)

const isDashed = computed(() => String(s.value.variant) === 'dashed')

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="isDashed ? 'props-dashed' : 'props-solid'">
    <div class="props-left">
      <span v-bind="editableAttrs('pros_title')">{{ s.pros_title || 'Pros' }}</span>
      <ul>
        <!-- eslint-disable-next-line vue/no-v-html -->
        <li v-for="item in pros" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
      </ul>
    </div>
    <div class="props-right">
      <span v-bind="editableAttrs('cons_title')">{{ s.cons_title || 'Cons' }}</span>
      <ul>
        <!-- eslint-disable-next-line vue/no-v-html -->
        <li v-for="item in cons" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
      </ul>
    </div>
  </div>
</template>
