import type { Meta, StoryObj } from "@storybook/vue3-vite"
import DatePicker from "./DatePicker.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Picker/DatePicker",
  component: DatePicker,
  tags: ["autodocs"],
  args: {
    label: "Starts at",
  },
  parameters: componentDoc("DatePicker", { barrel: "picker" }),
  decorators: [
    () => ({
      template: '<div class="w-80 p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof DatePicker>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Starts at" },
}

export const WithValue: Story = {
  args: { label: "Starts at", modelValue: "2024-06-15" },
}

export const WithMinMax: Story = {
  args: {
    label: "Starts at",
    minDate: "2024-06-10",
    maxDate: "2024-06-25",
    helpText: "Only Jun 10 - Jun 25 selectable",
  },
}

export const Required: Story = {
  args: { label: "Starts at", required: true },
}

export const Disabled: Story = {
  args: { label: "Starts at", disabled: true },
}

export const WithHelpText: Story = {
  args: { label: "Starts at", helpText: "Choose the event start date" },
}
