<script setup lang="ts">
import ACalendar from './ACalendar.vue'

const initState = () => ({
  color: 'blue',
  locale: 'ru',
  type: 'range-date',
  mode: 'dateTime'
})

const colorOptions = [
  { value: 'blue', label: 'Blue' },
  { value: 'red', label: 'Red' },
  { value: 'yellow', label: 'Yellow' },
  { value: 'gray', label: 'Gray' },
  { value: 'green', label: 'Green' }
]

const localeOptions = [
  { value: 'ru', label: 'Russian' },
  { value: 'en', label: 'English' }
]

const typeOptions = [
  { value: 'single-date', label: 'Single Date' },
  { value: 'range-date', label: 'Range Date' }
]

const modeOptions = [
  { value: 'date', label: 'Date' },
  { value: 'time', label: 'Time' },
  { value: 'dateTime', label: 'Date Time' }
]

const date = ref<Date>(new Date())

const range = ref({
  start: new Date(),
  end: new Date(new Date().setDate(new Date().getDate() + 14))
})
</script>

<template>
  <Story
    title="Elements/Calendar"
    :layout="{
      type: 'grid',
      width: 285
    }"
  >
    <Variant
      title="ACalendar"
      :init-state="initState"
    >
      <template #default="{ state }">
        <ACalendar
          v-model:range="range"
          v-model="date"
          :type="state.type"
          :locale="state.locale"
          :color="state.color"
          :mode="state.mode"
        />
      </template>

      <template #controls="{ state }">
        <HstSelect
          v-model="state.color"
          title="Color"
          :options="colorOptions"
        />
        <HstSelect
          v-model="state.locale"
          title="Locale"
          :options="localeOptions"
        />
        <HstSelect
          v-model="state.type"
          title="Type"
          :options="typeOptions"
        />
        <HstSelect
          v-model="state.mode"
          title="Mode"
          :options="modeOptions"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
