<script lang="ts" setup>
import { reactive } from 'vue'
import { dayFromString, dayFromToday, dayOffset, dayToDate } from 'zeed'
import { OuiButton, OuiCheckbox, OuiDay, OuiDemo, OuiInputNumber } from '@/lib'

const state = reactive({
  day: dayFromToday(),
  editableDay: undefined as number | undefined,
  emptyDay: undefined as number | undefined,
  formattedDay: dayFromToday(),
  customFooterDay: undefined as number | undefined,
  placeholderDay: dayFromString('2026-01-01'),
  showArrows: false,
  editable: true,
  disabled: false,
  clearable: false,
})

// Validator function for editable day
function parseDay(text: string): number | undefined {
  const parsed = dayFromString(text)
  return parsed ?? undefined
}

// Custom formatter for long date format
function formatDayLong(day: number): string {
  const date = dayToDate(day)
  return date.toLocaleDateString(undefined, {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

// Custom footer actions
function setYesterday() {
  state.customFooterDay = dayOffset(dayFromToday(), -1)
}

function setNextWeek() {
  state.customFooterDay = dayOffset(dayFromToday(), 7)
}
</script>

<template>
  <div>
    <OuiDay
      v-model="state.day"
      title="Required Date"
      description="Button mode: Arrow keys navigate days, Alt+Arrow for months, Cmd+Arrow for years"
      :required="true"
      :editable="state.editable"
      :show-arrows="state.showArrows"
      :disabled="state.disabled"
      :clearable="state.clearable"
    />

    <OuiDay
      v-model="state.editableDay"
      title="Editable Date"
      description="Type a date like '2026-02-10'. Keyboard: Alt+Arrow for months, Cmd+Arrow for years"
      :editable="state.editable"
      :show-arrows="state.showArrows"
      :disabled="state.disabled"
      :clearable="state.clearable"
    />

    <OuiDay
      v-model="state.emptyDay"
      title="Empty Date with Placeholder"
      description="Optional date field with placeholder"
      :placeholder-day="state.placeholderDay"
      :editable="state.editable"
      :show-arrows="state.showArrows"
      :disabled="state.disabled"
      :clearable="state.clearable"
    />

    <OuiDay
      v-model="state.formattedDay"
      title="Custom Formatter"
      description="Using a long weekday/month format"
      :placeholder-day="state.placeholderDay"
      :formatter="formatDayLong"
      :editable="state.editable"
      :show-arrows="state.showArrows"
      :disabled="state.disabled"
      :clearable="state.clearable"
    />

    <OuiDay
      v-model="state.customFooterDay"
      title="Custom Footer"
      description="Footer slot with custom actions"
      :show-arrows="state.showArrows"
      :editable="state.editable"
      :disabled="state.disabled"
      :clearable="state.clearable"
    >
      <template #footer>
        <OuiButton mode="ghost" @click="setYesterday">
          Gestern
        </OuiButton>
        <OuiButton mode="ghost" @click="setNextWeek">
          Nächste Woche
        </OuiButton>
      </template>
    </OuiDay>
  </div>
  <OuiDemo :state="state">
    <OuiInputNumber v-model="state.day" title="day" />
    <OuiInputNumber v-model="state.editableDay" title="editableDay" />
    <OuiInputNumber v-model="state.emptyDay" title="emptyDay" />
    <OuiInputNumber v-model="state.formattedDay" title="formattedDay" />
    <OuiInputNumber v-model="state.customFooterDay" title="customFooterDay" />
    <OuiInputNumber v-model="state.placeholderDay" title="placeholderDay" />
    <OuiCheckbox v-model="state.editable" switch title="Editable" />
    <OuiCheckbox v-model="state.showArrows" switch title="Show arrows" />
    <OuiCheckbox v-model="state.clearable" switch title="Clearable" />
    <OuiCheckbox v-model="state.disabled" switch title="Disabled" />
  </OuiDemo>
</template>
