<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) || 'plain')

const { editableAttrs } = 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-h2-style1: plain -->
  <h2
    v-if="variant === 'plain'"
    :id="String(s.anchor || '')"
    class="blog-h2-style1"
    v-bind="editableAttrs('title')"
  >
    {{ s.title }}
  </h2>

  <!-- blog-h2-style2: accent -->
  <h2
    v-else-if="variant === 'accent'"
    :id="String(s.anchor || '')"
    class="blog-h2-style2"
    v-bind="editableAttrs('title')"
  >
    <span class="blog-h2-style2-indicator" />
    {{ s.title }}
  </h2>
</template>

<style scoped>
.blog-h2-style1,.blog-h2-style2{font-size:22px;font-weight:900;line-height:1;margin-bottom:0;margin-top:16px}.blog-h2-style2{gap:8px;padding-left:8px;position:relative}.blog-h2-style2-indicator{background:#1fb04f;display:block;height:18px;left:0;position:absolute;top:2px;width:4px}.blog-h2-style1[id],.blog-h2-style2[id]{scroll-margin-top:80px}@media (min-width:768px){.blog-h2-style1{font-size:30px}.blog-h2-style2{font-size:30px;padding-left:16px}.blog-h2-style2-indicator{height:25px;width:5px}}
</style>
