<template>
  <div
    ref="boxRef"
    :style="styleMap?.mainStyle"
    class="w-full h-full flex flex-col box-border overflow-hidden relative"
  >
    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
    <div
      :style="styleMap?.titleStyle"
      class="h-40px shrink-0 overflow-hidden relative flex items-center justify-between box-border p-10px z-2"
    >
      <ImageBg
        :src="styleMap?.titleStyle?.imageSrc"
        :imageStyle="styleMap?.titleStyle?.imageStyle"
      />
      <span class="whitespace-pre! z-2" :style="titleTextStyle">{{ resolvedTitle.text }}</span>
      <span
        :style="styleMap?.titleButtonStyle"
        class="bg-#2195f6 z-2 shadow-[0_4px_0_#cccccc] text-white w-40px h-30px rounded-10px relative grid place-items-center"
      >
        <ImageBg
          :src="styleMap?.titleButtonStyle?.imageSrc"
          :imageStyle="styleMap?.titleButtonStyle?.imageStyle"
        />
        <LuX size="14px" class="z-2" />
      </span>
    </div>

    <div
      :style="styleMap?.contentStyle"
      ref="txtBoxRef"
      class="box-border flex-1 p-10px overflow-hidden break-all whitespace-pre-wrap relatvie z-2"
    >
      <div ref="txtRef" :style="contentTextStyle">{{ resolvedContent.text }}</div>
      <div
        class="v-scrollbar absolute right-6px w-4px"
        :style="{
          display: textHeight > textBoxHeight ? 'block' : 'none',
          background: 'rgba(0,0,0,0.2)',
          top: '42px',
          height: '40px'
        }"
      ></div>
    </div>

    <div class="h-40px shrink-0 flex items-center justify-around z-2">
      <div
        :style="{
          ...styleMap?.bottomButtonStyle,
          width: btnWidth + 'px',
          height: btnHeight + 'px'
        }"
        v-for="(btn, index) in btns"
        :key="index"
        class="relative grid place-items-center shadow-[0_4px_0_#cccccc] whitespace-pre!"
      >
        <ImageBg
          :src="styleMap?.bottomButtonStyle?.imageSrc"
          :imageStyle="styleMap?.bottomButtonStyle?.imageStyle"
        />
        <span class="z-2" :style="getButtonTextStyle(btn.text)">{{ resolveText(btn.text).text }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import { LuX } from 'vue-icons-plus/lu'
import { useProjectStore } from '@/store/modules/project'
import { useResizeObserver } from 'vue-hooks-plus'
import { useLanguage } from '../hooks/useLanguage'

import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width: number
  height: number
  styles: any
  state: string
  part: string
  title: string
  content: string
  // closeBtn: boolean
  btnWidth: number
  btnHeight: number
  btns: { text: string }[]
  id?: string
  fixedHeight?: boolean
}>()

const projectStore = useProjectStore()
const boxRef = ref<HTMLDivElement>()
const txtBoxRef = ref<HTMLDivElement>()
const txtRef = ref<HTMLSpanElement>()
const { resolveText, getTextStyle, getResolvedFontStyle } = useLanguage()

const textBoxHeight = ref(0)
const textHeight = ref(0)
const resolvedTitle = computed(() => resolveText(props.title))
const resolvedContent = computed(() => resolveText(props.content))
const titleTextStyle = getTextStyle(() => undefined, () => props.title)
const contentTextStyle = getTextStyle(() => undefined, () => props.content)

useResizeObserver(txtBoxRef, (entries) => {
  const entry = entries[0]
  const { height: _h } = entry.contentRect
  textBoxHeight.value = _h
})
useResizeObserver(txtRef, (entries) => {
  const entry = entries[0]
  const { height: _h } = entry.contentRect
  textHeight.value = _h
})

useResizeObserver(boxRef, (entries) => {
  const entry = entries[0]
  const h = entry.target.clientHeight
  const w = entry.target.clientWidth
  const widget = projectStore.activeWidgetMap[props.id!]
  if (widget?.props.width !== w && widget && !props.fixedHeight) {
    widget.props.width = w
  }
  if (widget?.props.height !== h && widget && !props.fixedHeight) {
    widget.props.height = h
  }
})

const styleMap = useWidgetStyle({
  widget: 'lv_msgbox',
  props
})

const getButtonTextStyle = (text?: string) => getResolvedFontStyle(text)
</script>

<style scoped></style>
