<script setup lang="ts">
import type { BlockData } from '@vigilkids/section-core'

import { computed } from 'vue'

import { useInlineEdit } from '../../../composables/useInlineEdit'
import { renderContent } from '../prosemirror'

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 renderedContent = computed(() => renderContent(s.value.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="blog-quote">
    <h3 v-if="s.title" class="blog-quote-title" v-bind="editableAttrs('title')">
      {{ s.title }}
    </h3>
    <div class="blog-quote-text" v-html="renderedContent" />
    <p v-if="s.attribution" class="blog-quote-author">
      _____ by <span v-bind="editableAttrs('attribution')">{{ s.attribution }}</span>
    </p>
  </div>
</template>

<style scoped>
.blog-quote{background:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.blog-quote-title{font-size:16px;font-weight:600;margin:0 0 16px}.blog-quote-text{font-size:12px;font-style:italic;line-height:1.625;margin:0 0 8px}.blog-quote-author{color:#666262;font-size:12px;margin:0}@media (min-width:768px){.blog-quote{border-radius:20px;padding:30px 28px}.blog-quote-title{font-size:20px}.blog-quote-text{font-size:14px;margin-bottom:16px}.blog-quote-author{font-size:14px}}
</style>
