<template>
  <div
    ref="boxRef"
    :style="styleMap?.mainStyle"
    class="w-full h-full relative overflow-hidden box-border flex items-start"
    :class="
      styleMap?.mainStyle?.textAlign === 'left'
        ? 'justify-start'
        : styleMap?.mainStyle?.textAlign === 'right'
          ? 'justify-end'
          : 'justify-center'
    "
  >
    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
    <span ref="txtRef" class="z-2 lv_label_txt break-all whitespace-pre">
      <span>{{ showSecond ? timeText : timeText?.slice(0, 5) }}</span>
      <span v-if="showAmPm" class="ml-8px">{{ isAM ? 'AM' : 'PM' }}</span>
    </span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width: number
  height: number
  timeText?: string
  styles: any
  state?: string
  part?: string
  showSecond?: boolean
  showAmPm?: boolean
}>()

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

const isAM = computed(() => {
  const hour = Number(props.timeText?.split(':')[0])
  return hour < 12
})
</script>

<style scoped>
.lv_label_txt::-webkit-scrollbar {
  display: none;
}
</style>
