import type { Meta, StoryObj } from '@storybook/react'
import * as React from 'react'
import type { DateRange } from 'react-day-picker'
import { Calendar } from './Calendar'

const meta: Meta<typeof Calendar> = {
  title: 'Form/Calendar',
  component: Calendar,
  argTypes: {
    mode: {
      control: { type: 'select' },
      options: ['single', 'multiple', 'range', 'default'],
      table: {
        type: { summary: 'single | multiple | range | default' },
        defaultValue: { summary: 'single' },
      },
    },
    showOutsideDays: {
      control: 'boolean',
      description: 'Whether to display days outside the current month.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'true' },
      },
    },
    // Behavior props
    onSelect: { control: false },
    selected: { control: false },
  },
  args: {
    mode: 'single',
    showOutsideDays: true,
  },
} satisfies Meta<typeof Calendar>

export default meta
type Story = StoryObj<typeof Calendar>

export const Default: Story = {
  render: function DefaultStory(args) {
    const mode =
      (args.mode as string) === 'default' ? 'single' : (args.mode ?? 'single')

    // State management based on mode - using fixed dates for Chromatic
    const [singleDate, setSingleDate] = React.useState<Date | undefined>(
      new Date(2025, 9, 15), // October 15, 2025
    )
    const [multipleDates, setMultipleDates] = React.useState<
      Date[] | undefined
    >([new Date(2025, 9, 15)]) // October 15, 2025
    const [range, setRange] = React.useState<DateRange | undefined>({
      from: new Date(2025, 9, 15), // October 15, 2025
    })

    // Select appropriate state and handler based on mode
    const selected =
      mode === 'multiple'
        ? multipleDates
        : mode === 'range'
          ? range
          : singleDate

    const onSelect =
      mode === 'multiple'
        ? setMultipleDates
        : mode === 'range'
          ? setRange
          : setSingleDate

    return (
      <Calendar
        {...args}
        mode={mode}
        selected={selected as never}
        onSelect={onSelect as never}
        defaultMonth={new Date(2025, 9, 1)} // October 2025
      />
    )
  },
}

export const Range: Story = {
  render: function RangeStory(args) {
    const [range, setRange] = React.useState<DateRange | undefined>({
      from: new Date(2025, 8, 4), // September 4, 2025
      to: new Date(2025, 9, 3), // October 3, 2025 (outside month)
    })

    return (
      <Calendar
        {...args}
        mode="range"
        selected={range}
        onSelect={(value) => setRange(value)}
        defaultMonth={new Date(2025, 8, 1)} // September 2025
      />
    )
  },
}

export const Multiple: Story = {
  render: function MultipleStory(args) {
    const [dates, setDates] = React.useState<Date[] | undefined>([
      new Date(2025, 9, 5), // October 5, 2025
      new Date(2025, 9, 12), // October 12, 2025
      new Date(2025, 9, 20), // October 20, 2025
      new Date(2025, 8, 30), // September 30, 2025 (outside month)
    ])

    return (
      <Calendar
        {...args}
        mode="multiple"
        selected={dates}
        onSelect={setDates}
        defaultMonth={new Date(2025, 9, 1)} // October 2025
      />
    )
  },
}

export const WithoutOutsideDays: Story = {
  render: function WithoutOutsideDaysStory(args) {
    const [date, setDate] = React.useState<Date | undefined>(
      new Date(2025, 9, 15), // October 15, 2025
    )

    return (
      <Calendar
        {...args}
        mode="single"
        selected={date}
        onSelect={setDate}
        showOutsideDays={false}
        defaultMonth={new Date(2025, 9, 1)} // October 2025
      />
    )
  },
}