import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { CalendarDate, type DateValue } from "@internationalized/date"
import { ref } from "vue"
import { Calendar } from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Calendar",
  component: Calendar,
  tags: ["autodocs"],
  parameters: componentDoc("Calendar"),
  argTypes: {
    disabled: { control: "boolean" },
    locale: { control: "text" },
    weekStartsOn: { control: { type: "select" }, options: [0, 1, 2, 3, 4, 5, 6] },
    fixedWeeks: { control: "boolean" },
    numberOfMonths: { control: { type: "number", min: 1, max: 3 } },
  },
} satisfies Meta<typeof Calendar>

export default meta
type Story = StoryObj<typeof meta>

const today = new CalendarDate(2024, 6, 15)

export const Default: Story = {
  render: (args) => ({
    components: { Calendar },
    setup() {
      const value = ref<DateValue | undefined>(today)
      return { args, value, today }
    },
    template: `
      <div class="space-y-2">
        <Calendar v-bind="args" v-model="value" :placeholder="today" />
        <div class="text-xs text-muted-foreground">Selected: {{ value?.toString() ?? "(none)" }}</div>
      </div>
    `,
  }),
}

export const RangeMode: Story = {
  name: "Multi-month",
  render: () => ({
    components: { Calendar },
    setup() {
      const value = ref<DateValue | undefined>()
      return { value, today }
    },
    template: `
      <Calendar v-model="value" :placeholder="today" :number-of-months="2" />
    `,
  }),
}

export const MinMax: Story = {
  name: "Min / Max",
  render: () => ({
    components: { Calendar },
    setup() {
      const value = ref<DateValue | undefined>()
      const min = new CalendarDate(2024, 6, 10)
      const max = new CalendarDate(2024, 6, 25)
      return { value, today, min, max }
    },
    template: `
      <div class="space-y-2">
        <Calendar v-model="value" :placeholder="today" :min-value="min" :max-value="max" />
        <div class="text-xs text-muted-foreground">Only Jun 10 – Jun 25 are selectable.</div>
      </div>
    `,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { Calendar },
    setup() {
      return { today }
    },
    template: '<Calendar :placeholder="today" disabled />',
  }),
}

export const FixedWeeks: Story = {
  name: "Fixed weeks",
  render: () => ({
    components: { Calendar },
    setup() {
      return { today }
    },
    template: '<Calendar :placeholder="today" fixed-weeks />',
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Calendar },
    setup() {
      const a = ref<DateValue | undefined>(today)
      const b = ref<DateValue | undefined>()
      return { a, b, today }
    },
    template: `
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">With selection</h3>
          <Calendar v-model="a" :placeholder="today" class="rounded-md border" />
          <div class="mt-2 text-xs text-muted-foreground">Selected: {{ a?.toString() }}</div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Empty</h3>
          <Calendar v-model="b" :placeholder="today" class="rounded-md border" />
        </section>
      </div>
    `,
  }),
}
