<script setup>
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
import 'v-calendar/dist/style.css'

const props = defineProps({
  modelValue: {
    type: Date,
    default: null
  },
  mode: {
    type: String,
    default: "date"
  }
})

const emit = defineEmits(['update:model-value', 'close'])

const colorMode = useColorMode()

const isDark = computed(() => colorMode.value === 'dark')

const date = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:model-value', value)
    emit('close')
  }
})

const selectToday = () => {
  emit('update:model-value', new Date())
  emit('close')
}

const attrs = [{
  key: 'today',
  highlight: {
    fillMode: 'outline',
  },
  dates: new Date()
}]
</script>

<template>
  <div class="space-y-3">
    <VCalendarDatePicker
        show-weeknumbers
        v-model="date"
        :mode="props.mode"
        is24hr
        transparent
        borderless
        color="green"
        :attributes="attrs"
        :is-dark="isDark"
        title-position="left"
        trim-weeks
        :first-day-of-week="2"
    />

    <div class="flex justify-end px-2 pb-2">
      <UButton
          size="xs"
          color="gray"
          variant="soft"
          icon="i-heroicons-calendar-days"
          label="Heute"
          @click="selectToday"
      />
    </div>
  </div>
</template>
