import { Meta, StoryObj } from "@storybook/react"
import { addDays } from "date-fns"
import React, { useState } from "react"
import { DatePicker, DatePickerProps } from "./DatePicker"

type Story = StoryObj<typeof DatePicker>

const meta: Meta<typeof DatePicker> = {
  title: "Design System/DatePicker",
  component: DatePicker,
}

export default meta

const Template = (args: DatePickerProps) => {
  const [date, setDate] = useState<Date | undefined>(args.selected)

  const onSelect = (date: Date | undefined) => {
    args.onSelect?.(date)
    setDate(date)
  }

  return <DatePicker {...args} selected={date} onSelect={onSelect} />
}

export const Default: Story = {
  render: Template,
}

export const Preselected: Story = {
  render: Template,
  args: {
    selected: addDays(new Date(), 2),
  },
}

export const DisabledDays: Story = {
  render: Template,
  args: {
    disabled: {
      before: new Date(),
      after: addDays(new Date(), 2),
    },
  },
}

export const DisabledButton: Story = {
  args: {
    disabled: true,
  },
}

export const Small: Story = {
  render: Template,
  args: {
    size: "sm",
  },
}

export const Error: Story = {
  render: Template,
  args: {
    error: true,
  },
}