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

import { computed } from 'vue'

import { useInlineEdit } from '../../../composables/useInlineEdit'
import { resolveArticleAnchor } from '../../../utils/article-anchor'

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 resolvedAnchor = computed(() => resolveArticleAnchor(s.value.anchor, s.value.title))

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-h3-style1: plain -->
  <h3 v-if="variant === 'plain'" :id="resolvedAnchor || undefined" class="blog-h3-style1">
    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
  </h3>

  <!-- blog-h3-style2: numbered -->
  <h3 v-else-if="variant === 'numbered'" :id="resolvedAnchor || undefined" class="blog-h3-style2">
    <span class="blog-h3-style2-number" v-bind="editableAttrs('number')">{{ s.number }}</span>
    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
  </h3>

  <!-- blog-h3-style3: pill -->
  <h3 v-else-if="variant === 'pill'" :id="resolvedAnchor || undefined" class="blog-h3-style3">
    <span class="blog-h3-style3-badge" v-bind="editableAttrs('label')">{{ s.label }}</span>
    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
  </h3>

  <!-- blog-h3-style4: icon -->
  <h3 v-else-if="variant === 'icon'" :id="resolvedAnchor || undefined" class="blog-h3-style4">
    <div class="blog-h3-style4-icon-wrapper">
      <!-- #h3-round -->
      <svg
        class="blog-h3-style4-icon"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <mask
          id="h3-round-mask0"
          style="mask-type: alpha"
          maskUnits="userSpaceOnUse"
          x="0"
          y="0"
          width="24"
          height="24"
        >
          <rect width="24" height="24" fill="#D9D9D9" />
        </mask>
        <g mask="url(#h3-round-mask0)">
          <path
            d="M14.0337 0.558447C14.5853 0.180022 15.3451 0.38452 15.6344 0.989291L17.6614 5.22613C17.7689 5.45078 17.9497 5.63206 18.174 5.73992L22.4014 7.77291C23.0042 8.06278 23.2081 8.82181 22.8315 9.37363L20.1843 13.2521C20.0445 13.457 19.9788 13.7035 19.9979 13.9511L20.3599 18.6396C20.4114 19.3066 19.8569 19.8616 19.1907 19.8099L14.5177 19.4472C14.2698 19.428 14.0229 19.4941 13.818 19.6347L9.95375 22.2858C9.40216 22.6642 8.64241 22.4597 8.35308 21.855L6.32609 17.6181C6.21862 17.3935 6.03775 17.2122 5.81348 17.1043L1.58608 15.0713C0.983319 14.7815 0.779391 14.0225 1.15601 13.4706L3.80314 9.59211C3.94293 9.38728 4.0087 9.14072 3.98959 8.89312L3.62762 4.20466C3.57612 3.53761 4.13053 2.9827 4.79682 3.03441L9.46977 3.39706C9.71768 3.4163 9.96454 3.35015 10.1694 3.20958L14.0337 0.558447Z"
            fill="#1FB04F"
          />
          <path
            d="M8.26009 1.55404C8.54364 0.946524 9.30138 0.734741 9.85654 1.10785L13.7459 3.72178C13.9521 3.86038 14.1996 3.92415 14.4473 3.90254L19.1165 3.49501C19.7823 3.43691 20.342 3.98649 20.2968 4.65402L19.9796 9.34576C19.9628 9.59354 20.0309 9.83947 20.1727 10.043L22.8566 13.8959C23.2385 14.4441 23.0418 15.205 22.4418 15.5007L18.234 17.5742C18.0108 17.6842 17.8317 17.8672 17.7264 18.0929L15.7399 22.3491C15.4563 22.9566 14.6986 23.1684 14.1434 22.7953L10.2541 20.1814C10.0478 20.0428 9.80035 19.979 9.55264 20.0006L4.88341 20.4081C4.21766 20.4662 3.65799 19.9167 3.70313 19.2491L4.02038 14.5574C4.03714 14.3096 3.96902 14.0637 3.82728 13.8602L1.14335 10.0073C0.761488 9.45907 0.958166 8.6981 1.55813 8.40245L5.76591 6.32891C5.98914 6.21891 6.16827 6.0359 6.2736 5.81023L8.26009 1.55404Z"
            fill="#F7FFFA"
          />
        </g>
      </svg>
      <span class="blog-h3-style4-number">{{ s.number }}</span>
    </div>
    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
  </h3>
</template>

<style scoped>
.blog-h3-style1{line-height:1}.blog-h3-style1,.blog-h3-style2{font-size:18px;font-weight:900;margin-bottom:0;margin-top:16px}.blog-h3-style2{display:flex;line-height:100%}.blog-h3-style2>*+*{margin-left:8px}.blog-h3-style2-number{align-items:center;border:1px solid #1fb04f;border-radius:50%;color:#1fb04f;display:inline-flex;flex-shrink:0;font-size:18px;height:24px;justify-content:center;width:24px}.blog-h3-style3{display:flex;font-size:18px;font-weight:900;line-height:1;margin-bottom:0;margin-top:16px}.blog-h3-style3>*+*{margin-left:4px}.blog-h3-style3-badge{background:#1fb04f;border-radius:20px;color:#fff;display:inline-block;flex-shrink:0;font-size:16px;font-weight:600;height:22px;line-height:22px;padding:0 8px;transform:translateY(4px)}.blog-h3-style4{display:flex;font-size:18px;font-weight:900;line-height:1;margin-bottom:0;margin-top:16px}.blog-h3-style4>*+*{margin-left:4px}.blog-h3-style4-icon-wrapper{align-items:center;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:500;height:24px;justify-content:center;position:relative;width:24px}.blog-h3-style4-icon{left:0;position:absolute;top:1px}.blog-h3-style4-number{color:#000;font-size:16px;font-weight:600;position:relative;z-index:10}.blog-h3-style1[id],.blog-h3-style2[id],.blog-h3-style3[id],.blog-h3-style4[id]{scroll-margin-top:80px}@media (min-width:768px){.blog-h3-style1,.blog-h3-style2,.blog-h3-style3{font-size:24px}.blog-h3-style3>*+*{margin-left:12px}.blog-h3-style4{font-size:24px}.blog-h3-style4>*+*{margin-left:12px}}
</style>
