<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(() => String(s.value.variant || 'note'))

const containerClass = computed(() => {
  if (variant.value === 'tips')
    return 'tips-box'
  if (variant.value === 'warning')
    return 'note-box note-warning'
  return 'note-box'
})

const labelClass = computed(() => (variant.value === 'tips' ? 'tips-box-label' : 'note-box-label'))

const contentClass = computed(() => (variant.value === 'tips' ? 'tips-box-content' : 'note-box-content'))

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>
  <div :class="containerClass">
    <div :class="labelClass">
      <img v-if="s.icon_url" :src="(s.icon_url as string)" :alt="(s.label_text as string) || ''">
      <!-- eslint-disable-next-line vue/no-v-html -->
      <span v-bind="editableAttrs('label_text')" v-html="s.label_text" />
    </div>
    <!-- eslint-disable-next-line vue/no-v-html -->
    <p :class="contentClass" v-bind="editableAttrs('content')" v-html="s.content" />
  </div>
</template>
