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

const initState = () => ({
  disabled: false,
  label: 'Label',
  size: 'md',
  error: '',
  required: false,
  color: 'blue',
  locale: 'ru',
  type: 'single-date',
  mode: 'date'
})


const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' }
]

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="Forms/Input/Date"
  >
    <Variant
      title="InputDate"
      :init-state="initState"
    >
      <template #default="{state}">
        <div class="p-10">
          <a-input-date
            v-model:range="range"
            v-model="date"
            v-bind="state"
          />

          <p
            v-if="state.type === 'single-date'"
            class="mt-5"
          >
            <span class="font-bold">v-model:</span> {{ date }}
          </p>

          <template v-else>
            <p class="mt-5">
              <span class="font-bold">v-model start:</span> {{ range.start }}
            </p>
            <p class="mt-5">
              <span class="font-bold">v-model end:</span> {{ range.end }}
            </p>
          </template>
        </div>
      </template>

      <template #controls="{ state }">
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstCheckbox
          v-model="state.disabled"
          title="Disabled"
        />
        <HstCheckbox
          v-model="state.required"
          title="Required"
        />
        <HstText
          v-model="state.label"
          title="Label"
        />
        <HstText
          v-model="state.error"
          title="Error"
        />
        <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>
