import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import CpDatepicker from '@/components/CpDatepicker.vue'

const datepickerModes = ['single', 'range'] as const

const meta = {
  title: 'Organisms/CpDatepicker',
  component: CpDatepicker,
  argTypes: {
    mode: {
      control: 'select',
      options: datepickerModes,
      description: 'Selection mode: single date or date range',
    },
    closeAfterSelect: {
      control: 'boolean',
      description: 'Whether to close the picker after selection',
    },
    label: { control: 'text', description: 'Label text for the datepicker' },
    placeholder: { control: 'text', description: 'Placeholder text for the input' },
    isError: { control: 'boolean', description: 'Whether the field is in an invalid state' },
    errorMessage: { control: 'text', description: 'Custom error message to display' },
    initDateOne: { control: 'text', description: 'Initial first date (YYYY-MM-DD)' },
    initDateTwo: { control: 'text', description: 'Initial second date for range mode (YYYY-MM-DD)' },
    minDate: { control: 'text', description: 'Minimum allowed date' },
    maxDate: { control: 'text', description: 'Maximum allowed date' },
    allowPastDates: { control: 'boolean', description: 'Whether to allow selecting past dates' },
    isInline: { control: 'boolean', description: 'Whether to display the picker inline' },
    singleMonth: { control: 'boolean', description: 'Whether to show only one month' },
    locale: { control: 'text', description: 'Locale for date formatting' },
  },
} satisfies Meta<typeof CpDatepicker>

export default meta

type Story = StoryObj<typeof meta>

type DatepickerStoryArgs = NonNullable<Story['args']>

const defaultTemplate = `
  <div style="height: 35vh; max-width: 600px; padding: 20px;">
    <CpDatepicker
      v-bind="args"
      @dates="(selectedDates) => dates = selectedDates"
    />
  </div>
`

const renderDatepicker = (args: DatepickerStoryArgs) => ({
  components: { CpDatepicker },
  setup() {
    const dates = ref<string[]>([])
    return { args, dates }
  },
  template: defaultTemplate,
})

export const Default: Story = {
  args: {
    mode: 'single',
    label: 'Select Date',
    placeholder: 'Choose a date',
    closeAfterSelect: true,
    allowPastDates: false,
    isInline: false,
    singleMonth: false,
  },
  render: renderDatepicker,
}

/**
 * Range mode lets the user pick a start and end date.
 */
export const DateRange: Story = {
  args: {
    ...Default.args,
    mode: 'range',
    label: 'Select Date Range',
    placeholder: 'Choose date range',
  },
  render: renderDatepicker,
}

/**
 * Invalid state with a custom error message.
 */
export const WithError: Story = {
  args: {
    ...Default.args,
    label: 'Datepicker with Error',
    isError: true,
    errorMessage: 'Please select a valid date',
  },
  render: renderDatepicker,
}

/**
 * Pre-populate the picker with an initial date through `initDateOne`
 * (and `initDateTwo` in range mode).
 */
export const WithInitialDates: Story = {
  args: {
    ...Default.args,
    initDateOne: '2024-03-15',
    label: 'Datepicker with Initial Date',
  },
  render: renderDatepicker,
}

/**
 * Show a single month at a time instead of the default two-month layout —
 * useful for narrow spaces.
 */
export const SingleMonth: Story = {
  args: {
    ...Default.args,
    singleMonth: true,
    label: 'Single Month View',
  },
  render: renderDatepicker,
}

/**
 * By default the picker blocks past dates. Set `allowPastDates` to `true`
 * to let the user pick any date.
 */
export const AllowPastDates: Story = {
  args: {
    ...Default.args,
    allowPastDates: true,
    label: 'Allow Past Dates',
  },
  render: renderDatepicker,
}