import type { Meta, StoryObj } from '@storybook/vue3'
import { addWeeks, startOfISOWeek } from 'date-fns'
import { ref } from 'vue'
import FdsWeekCalendar from './FdsWeekCalendar.vue'

const meta: Meta<typeof FdsWeekCalendar> = {
  title: 'FDS/FdsWeekCalendar',
  component: FdsWeekCalendar,
  tags: ['autodocs'],
  parameters: {
    actions: {
      handles: ['change-date-range', 'select-date', 'increment-week', 'decrement-week'],
    },
  },
  argTypes: {
    previewOtherDays: { control: { type: 'boolean' } },
    enableHorizontalAnimation: { control: { type: 'boolean' } },
    weekLabel: { control: { type: 'text' } },
    selected: { control: { type: 'date' } },
    maxDate: { control: { type: 'date' } },
  },
  args: {
    previewOtherDays: true,
    enableHorizontalAnimation: true,
    weekLabel: 'Week',
    selected: null,
    maxDate: undefined,
  },
}

export default meta
type Story = StoryObj<typeof meta>

const toDateOrUndefined = (value: unknown): Date | undefined => {
  if (value instanceof Date) return value
  if (typeof value === 'number' || typeof value === 'string') {
    const parsed = new Date(value)
    if (!Number.isNaN(parsed.getTime())) return parsed
  }
  return undefined
}

const toDateOrNull = (value: unknown): Date | null => toDateOrUndefined(value) ?? null

export const Default: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsWeekCalendar },
    setup: () => {
      const selected = ref<Date | null>(toDateOrNull(args.selected))
      const currentMaxDate = ref<Date | undefined>(toDateOrUndefined(args.maxDate))

      return {
        args,
        selected,
        currentMaxDate,
        onSelectedDay: (day: Date | null) => {
          selected.value = day
        },
      }
    },
    template: `
      <div style="max-width: 640px;">
        <FdsWeekCalendar
          v-bind="args"
          :selected="selected"
          :max-date="currentMaxDate"
          @change-selected-day="onSelectedDay"
        />
      </div>
    `,
  }),
  args: {
    previewOtherDays: false,
    maxDate: undefined,
    disablePreviousWeek: false,
    disableNextWeek: false,
  },
}

export const WithMaxDate: Story = {
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsWeekCalendar },
    setup: () => {
      const monday = startOfISOWeek(new Date())
      const selected = ref<Date | null>(monday)
      const maxDate = ref(addWeeks(monday, 2))
      return {
        args,
        selected,
        maxDate,
        onSelectedDay: (day: Date | null) => {
          selected.value = day
        },
      }
    },
    template: `
      <div style="max-width: 640px;">
        <FdsWeekCalendar
          v-bind="args"
          :selected="selected"
          :max-date="maxDate"
          @change-selected-day="onSelectedDay"
        />
      </div>
    `,
  }),
  args: {
    previewOtherDays: false,
    enableHorizontalAnimation: false,
  },
}