<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 blockOrder = computed(() => props.blockOrder)
const blocks = computed(() => props.blocks)

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>
<template v-for="blockId in blockOrder" :key="blockId">
    <h5 v-if="blocks[blockId]" class="blog-step">
      <span class="blog-step-number" v-bind="blockEditableAttrs(blockId, 'label')">{{
        blocks[blockId]!.settings.label
      }}</span>
      <span>. </span>
      <span
        v-bind="blockEditableAttrs(blockId, 'description')"
        v-html="String(blocks[blockId]!.settings.description || '')"
      />
    </h5>
  </template>
</template>

<style scoped>
.blog-step{font-size:16px;font-weight:400;margin-top:20px}.blog-step-number{color:#1fb04f;font-style:italic;font-weight:900}.blog-step :deep(a){color:#1fb04f;font-weight:900;text-decoration:none}@media (min-width:768px){.blog-step{font-size:20px}}
</style>
