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

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

import { docCellStyle, docLabelStyle, docRowColumnStyle } from '@/stories/documentationStyles'

const dateStackStyle = `${docCellStyle} width: 100%; max-width: 360px;`

const meta = {
  title: 'Atoms/CpDate',
  component: CpDate,
  argTypes: {
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'The size of the date input',
    },
    modelValue: {
      control: 'text',
      description: 'The date value (ISO format)',
    },
    label: {
      control: 'text',
      description: 'Label text for the date input',
    },
    required: {
      control: 'boolean',
      description: 'Whether the field is required',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the field is disabled',
    },
    isInvalid: {
      control: 'boolean',
      description: 'Whether the field is in an invalid state',
    },
    errorMessage: {
      control: 'text',
      description: 'Custom error message to display',
    },
    displayErrorMessage: {
      control: 'boolean',
      description: 'Whether to display error messages',
    },
    autocompleteBirthday: {
      control: 'boolean',
      description: 'Whether to enable birthday autocomplete',
    },
    locale: {
      control: 'text',
      description: 'Locale for date formatting',
    },
    minDate: {
      control: 'text',
      description: 'Minimum allowed date',
    },
    maxDate: {
      control: 'text',
      description: 'Maximum allowed date',
    },
  },
} satisfies Meta<typeof CpDate>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default date input. Use the controls to experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    label: 'Date',
    required: false,
    disabled: false,
    isInvalid: false,
    displayErrorMessage: true,
  },
  render: (args) => ({
    components: { CpDate },
    setup() {
      const date = ref('')
      return { args, date }
    },
    template: `
      <div style="max-width: 400px; padding: 20px;">
        <CpDate
          v-model="date"
          v-bind="args"
          @onValidation="(isValid) => console.log('Validation:', isValid)"
        />
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* States                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Default, required, disabled and invalid states compared side by side.
 */
export const States: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpDate },
    setup() {
      const date = ref('')
      return { date, docRowColumnStyle, dateStackStyle, docLabelStyle }
    },
    template: `
      <div :style="docRowColumnStyle">
        <div :style="dateStackStyle">
          <span :style="docLabelStyle">Default</span>
          <CpDate v-model="date" label="Date" />
        </div>
        <div :style="dateStackStyle">
          <span :style="docLabelStyle">Required</span>
          <CpDate v-model="date" label="Date" :required="true" :display-error-message="false" />
        </div>
        <div :style="dateStackStyle">
          <span :style="docLabelStyle">Disabled</span>
          <CpDate v-model="date" label="Date" :disabled="true" />
        </div>
        <div :style="dateStackStyle">
          <span :style="docLabelStyle">Invalid</span>
          <CpDate
            v-model="date"
            label="Date"
            :is-invalid="true"
            :required="true"
            error-message="Please enter a valid date"
          />
        </div>
      </div>
    `,
  }),
}

/**
 * Compares input ordering by locale (day/month in French, month/day in US English).
 */
export const LocaleOrdering: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpDate },
    setup() {
      const frenchDate = ref('')
      const usDate = ref('')
      return { frenchDate, usDate, docRowColumnStyle, dateStackStyle, docLabelStyle }
    },
    template: `
      <div :style="docRowColumnStyle">
        <div :style="dateStackStyle">
          <span :style="docLabelStyle">fr-FR (day / month / year)</span>
          <CpDate v-model="frenchDate" label="Date" locale="fr-FR" />
        </div>
        <div :style="dateStackStyle">
          <span :style="docLabelStyle">en-US (month / day / year)</span>
          <CpDate v-model="usDate" label="Date" locale="en-US" />
        </div>
      </div>
    `,
  }),
}

/**
 * Combines a date input with a text input on the same line.
 */
export const NextToInput: Story = {
  args: {
    label: 'Date',
    required: false,
    disabled: false,
    isInvalid: false,
    displayErrorMessage: true,
  },
  render: (args) => ({
    components: { CpDate },
    setup() {
      const date = ref('')
      const textModel = ref('')
      return { args, date, textModel }
    },
    template: `
      <div style="display: flex; flex-direction: column; gap: 10px; max-width: 245px; padding: 0px;">
        <CpDate
          v-model="date"
          v-bind="args"
          style="flex: 1; min-width: 0;"
          @onValidation="(isValid) => console.log('Validation:', isValid)"
        />
        <CpInput
          v-model="textModel"
          label="Text input"
          placeholder="Enter text here"
          style="flex: 1; min-width: 0;"
        >
          <template #leading-icon>
            <CpIcon type="key" />
          </template>
          <template #trailing-icon>
            <CpIcon type="key" />
          </template>
        </CpInput>
      </div>
    `,
  }),
}