<script lang="ts" setup>
import { ref } from '#imports'

defineOptions({
  name: 'ACalendar'
})

interface Props {
  locale?: 'ru' | 'en'
  color: 'blue' | 'red' | 'yellow' | 'gray' | 'green'
  type: 'single-date' | 'range-date'
  mode: 'date' | 'time' | 'dateTime'
}

const props = withDefaults(defineProps<Props>(), {
  locale: 'ru',
  color: 'blue',
  type: 'range-date',
  mode: 'date'
})

const date = defineModel<Date>({
  default: new Date()
})

const range = defineModel<{
  value: {
    start: Date
    end: Date
  }
}>('range', {
  default: {
    start: new Date(),
    end: new Date(new Date().setDate(new Date().getDate() + 14))
  }
})

const popover = {
  visibility: 'click',
  placement: 'bottom-end',
}
</script>

<template>
  <div>
    <client-only>
      <VDatePicker
        v-if="type === 'range-date'"
        v-model.range="range"
        :is-dark="{ selector: ':root', darkClass: 'dark' }"
        :color="color"
        :locale="locale"
        :mode="mode"
        title-position="left"
        :popover="popover"
      >
        <template
          v-if="$slots.default"
          #default="value"
        >
          <slot v-bind="value" />
        </template>
      </VDatePicker>
      <VDatePicker
        v-else
        v-model="date"
        :is-dark="{ selector: ':root', darkClass: 'dark' }"
        :color="color"
        :locale="locale"
        :mode="mode"
        title-position="left"
        :popover="popover"
      >
        <template
          v-if="$slots.default"
          #default="value"
        >
          <slot v-bind="value" />
        </template>
      </VDatePicker>
    </client-only>
  </div>
</template>
