import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Calendar } from './Calendar'
import { RangeCalendar } from './RangeCalendar'

const meta = {
  title: 'Components/Calendar',
  component: Calendar,
  argTypes: {
    isDisabled: {
      control: 'boolean',
    },
  },
} satisfies Meta<typeof Calendar>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {},
}

export const WithSelectedDate: Story = {
  render: function Render() {
    const [date, setDate] = useState<Date | null>(new Date())
    return <Calendar value={date} onChange={setDate} />
  },
}

export const WithMinMaxDate: Story = {
  render: function Render() {
    const [date, setDate] = useState<Date | null>(new Date())
    const minDate = new Date()
    minDate.setDate(minDate.getDate() - 7)
    const maxDate = new Date()
    maxDate.setDate(maxDate.getDate() + 7)
    return <Calendar value={date} onChange={setDate} minValue={minDate} maxValue={maxDate} />
  },
}

export const Disabled: Story = {
  args: {
    isDisabled: true,
  },
}

export const Range: StoryObj<typeof RangeCalendar> = {
  render: function Render() {
    const [range, setRange] = useState<{ start: Date; end: Date } | null>(null)
    return <RangeCalendar value={range} onChange={setRange} />
  },
}

export const RangeWithSelectedDates: StoryObj<typeof RangeCalendar> = {
  render: function Render() {
    const start = new Date()
    const end = new Date()
    end.setDate(end.getDate() + 7)
    const [range, setRange] = useState<{ start: Date; end: Date } | null>({ start, end })
    return <RangeCalendar value={range} onChange={setRange} />
  },
}