import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { DatePicker } from './DatePicker'
import { DateRangePicker } from './DateRangePicker'

const meta = {
  title: 'Components/DatePicker',
  component: DatePicker,
  args: {
    value: null,
    onChange: () => {},
  },
  argTypes: {
    isDisabled: {
      control: 'boolean',
    },
  },
} satisfies Meta<typeof DatePicker>

export default meta
type Story = StoryObj<typeof meta>

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

export const WithSelectedDate: Story = {
  render: function Render() {
    const [date, setDate] = useState<Date | null>(new Date())
    return <DatePicker 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 <DatePicker value={date} onChange={setDate} minValue={minDate} maxValue={maxDate} />
  },
}

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

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

export const RangeWithSelectedDates: StoryObj<typeof DateRangePicker> = {
  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 <DateRangePicker value={range} onChange={setRange} />
  },
}

export const RangeDisabled: StoryObj<typeof DateRangePicker> = {
  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 <DateRangePicker value={range} onChange={setRange} isDisabled />
  },
}