<template>
  <div :style="styleMap?.mainStyle" class="w-full h-full box-border flex items-center relative">
    <ImageBg
      v-if="styleMap?.mainStyle?.imageSrc"
      :src="styleMap?.mainStyle?.imageSrc"
      :imageStyle="styleMap?.mainStyle?.imageStyle"
    />
    <div
      :style="{ ...styleMap?.indicatorStyle, backgroundColor: 'transparent' }"
      class="h-16px w-16px shrink-0 overflow-hidden relative z-1"
    >
      <BsCheckSquareFill
        v-if="part === 'indicator' && state !== 'default'"
        size="18px"
        class="w-110% h-110% absolute top--1px left--1px"
        :color="styleMap?.indicatorStyle?.backgroundColor"
      />
    </div>
    <div class="ml-8px whitespace-pre! z-1" :style="textStyle">{{ resolvedText.text }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import { BsCheckSquareFill } from 'vue-icons-plus/bs'
import ImageBg from '../ImageBg.vue'
import { useLanguage } from '../hooks/useLanguage'

const props = defineProps<{
  width?: number
  height?: number
  text?: string
  styles: any
  state?: string
  part?: string
}>()
const { resolveText, getTextStyle } = useLanguage()
const resolvedText = computed(() => resolveText(props.text))
const textStyle = getTextStyle(
  () => undefined,
  () => props.text
)

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