<template>
  <div :style="styleMap?.mainStyle" class="w-full h-full flex flex-col overflow-hidden box-border">
    <div
      :style="{ ...styleMap?.headerStyle, height: titleHeight + 'px' }"
      class="flex items-center justify-between box-border p-10px whitespace-pre relative"
    >
      <ImageBg
        v-if="styleMap?.headerStyle?.imageSrc"
        :src="styleMap?.headerStyle?.imageSrc"
        :imageStyle="styleMap?.headerStyle?.imageStyle"
      />
      <span class="z-2" :style="titleTextStyle">{{ resolvedTitle.text }}</span>
      <div class="flex items-center gap-4px z-2">
        <div
          v-for="(btn, index) in btns"
          :style="{ ...styleMap?.buttonStyle, width: btn.width + 'px', height: '30px' }"
          :key="index"
          class="grid place-items-center text-white shadow-[0_4px_0_#cccccc] relative"
        >
          <span v-if="btn.type === 'symbol'" class="z-2">
            <i class="lvgl-icon not-italic" v-html="getSymbol(btn.img_symbol)"></i>
          </span>

          <ImageBg
            v-if="styleMap?.buttonStyle?.imageSrc"
            :src="styleMap?.buttonStyle?.imageSrc"
            :imageStyle="styleMap?.buttonStyle?.imageStyle"
          />

          <ImageBg
            v-if="btn.type === 'img'"
            class="h-70px"
            :id="btn.img_id"
            :image-style="{
              backgroundColor: btn.enableCover ? btn.img_recolor : '',
              opacity: btn.enableAlpha ? btn.img_alpha / 255 : 1
            }"
            :image-props="{ width: btn.img_width + 'px', height: btn.img_height + 'px' }"
          />
        </div>
      </div>
    </div>
    <div
      :style="styleMap?.contentStyle"
      class="flex-1 break-all box-border p-10px whitespace-pre relative"
    >
      <ImageBg
        v-if="styleMap?.contentStyle?.imageSrc"
        :src="styleMap?.contentStyle?.imageSrc"
        :imageStyle="styleMap?.contentStyle?.imageStyle"
      />
      <span class="z-2" :style="contentTextStyle">{{ resolvedContent.text }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import { getSymbol } from '@/utils'
import { useLanguage } from '../hooks/useLanguage'

import type { ListItem } from './data'

import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width: number
  height: number
  styles: any
  state: string
  part: string
  title: string
  titleHeight: number
  text: string
  btns: ListItem[]
}>()
const { resolveText, getTextStyle } = useLanguage()
const resolvedTitle = computed(() => resolveText(props.title))
const resolvedContent = computed(() => resolveText(props.text))
const titleTextStyle = getTextStyle(() => undefined, () => props.title)
const contentTextStyle = getTextStyle(() => undefined, () => props.text)

const styleMap = useWidgetStyle({
  widget: 'lv_win',
  props
})
</script>

<style scoped></style>
