<script setup lang="ts">
import { useIntervalFn } from '@vueuse/core'
import { computed, ref } from 'vue'
import { dateUtil } from '@/utils/dateUtil'
import { DateFormatEnum } from '@/enums/timeEnum'
import type { CreateComponentType } from '@/core/Library/types'
import { useTranslation } from '@/hooks/useTranslation'

defineProps<{
  config: CreateComponentType
}>()

const getNowDate = () => `${dateUtil().format('YYYY/MM/DD')} ${dateUtil().format(DateFormatEnum.HH_MM_SS)}`

const { t } = useTranslation()

const date = ref<string>(getNowDate())

const weekI18nKey = [
  'clockSunday',
  'clockMonday',
  'clockTuesday',
  'clockWednesday',
  'clockThursday',
  'clockFriday',
  'clockSaturday',
]

const getWeek = computed(
  () => {
    const index = dateUtil().day()
    return t(weekI18nKey[index])
  },
)

useIntervalFn(() => {
  date.value = getNowDate()
}, 1000)
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center overflow-hidden">
    <div class="text-1em">
      {{ date.split(' ')?.[0] }} {{ getWeek }}
    </div>
    <div class="p-1 text-2em">
      {{ date.split(' ')?.[1] }}
    </div>
  </main>
</template>