<script setup>
import { buildCalloutOpenerLine } from '../../lib/markdown-callout.js'
import ProseCallout from './ProseCallout.vue'
import ContentMarkdownEditableInline from './ContentMarkdownEditableInline.vue'

const props = defineProps({
  /** 콜아웃 본문 */
  modelValue: {
    type: String,
    default: ''
  },
  calloutEmojiEnabled: {
    type: Boolean,
    default: true
  },
  calloutEmoji: {
    type: String,
    default: '💡'
  },
  calloutBackground: {
    type: String,
    default: 'blue'
  },
  /** 본문 첫 줄 source-line(0-based) */
  bodySourceLine: {
    type: Number,
    required: true
  },
  /** 콜아웃 선언 줄 source-line(0-based) */
  blockSourceLine: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['commit'])

/**
 * 콜아웃 마크다운 줄을 반영한다.
 * @param {string} body - 본문
 * @returns {void}
 */
const commitCallout = (body) => {
  const contentLines = String(body ?? '').replace(/\r/g, '').split('\n')

  emit('commit', [
    buildCalloutOpenerLine({
      calloutEmojiEnabled: props.calloutEmojiEnabled,
      calloutEmoji: props.calloutEmoji,
      calloutBackground: props.calloutBackground
    }),
    ...contentLines,
    ':::'
  ])
}

/**
 * 본문 편집 반영
 * @param {string} body - 본문
 * @returns {void}
 */
const onBodyCommit = (body) => {
  commitCallout(body)
}
</script>

<template>
  <div
    class="content-markdown-callout-editor relative"
    :data-source-line="blockSourceLine"
  >
    <ProseCallout
      :emoji-enabled="false"
      :background="calloutBackground"
    >
      <div class="content-markdown-callout-editor__inner flex items-start gap-2">
        <span
          class="content-markdown-callout-editor__emoji inline-flex size-9 shrink-0 items-center justify-center rounded-md text-xl text-[var(--site-text)]"
          aria-hidden="true"
        >
          <span v-if="calloutEmojiEnabled">{{ calloutEmoji || '💡' }}</span>
          <span v-else class="text-base text-[#8e9cac]">+</span>
        </span>
        <ContentMarkdownEditableInline
          block-class="content-markdown-callout-editor__body min-w-0 flex-1 text-[15px] leading-8 text-[var(--site-text)]"
          enter-mode="multiline"
          :source-line="bodySourceLine"
          :model-value="modelValue"
          @commit="onBodyCommit"
        />
      </div>
    </ProseCallout>
  </div>
</template>
