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

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

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

/** Native `<textarea>` attributes not declared as Vue props (see `CpTextarea` template). */
type CpTextareaPassthroughAttrs = {
  maxLength?: number
  rows?: number
}

type CpTextareaStoryArgs = ComponentPropsAndSlots<typeof CpTextarea> & CpTextareaPassthroughAttrs

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

const meta = {
  title: 'Atoms/CpTextarea',
  component: CpTextarea,
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The textarea value',
    },
    label: {
      control: 'text',
      description: 'Label text for the textarea',
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text',
    },
    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: 'Error message to display',
    },
    rows: {
      control: 'number',
      description: 'Number of visible rows',
    },
    maxLength: {
      control: 'number',
      description: 'Maximum number of characters allowed',
    },
  },
} satisfies Meta<CpTextareaStoryArgs>

export default meta

type Story = StoryObj<CpTextareaStoryArgs>

type TextareaStoryArgs = Partial<CpTextareaStoryArgs>

/**
 * Default textarea. Use the controls to experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    label: 'Textarea Label',
    placeholder: 'Enter your message here',
    rows: 4,
  },
  render: (args: TextareaStoryArgs) => ({
    components: { CpTextarea },
    setup() {
      const value = ref('')
      return { args, value }
    },
    template: `
      <div style="max-width: 400px; padding: 20px;">
        <CpTextarea v-model="value" v-bind="args" />
      </div>
    `,
  }),
}

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

/**
 * Default, required, disabled and invalid states compared side by side.
 */
export const States: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpTextarea },
    setup() {
      const value = ref('')
      return { value, docRowColumnStyle, textareaStackStyle, docLabelStyle }
    },
    template: `
      <div :style="docRowColumnStyle">
        <div :style="textareaStackStyle">
          <span :style="docLabelStyle">Default</span>
          <CpTextarea v-model="value" label="Textarea label" placeholder="Enter your message here" />
        </div>
        <div :style="textareaStackStyle">
          <span :style="docLabelStyle">Required</span>
          <CpTextarea v-model="value" label="Textarea label" placeholder="Enter your message here" :required="true" />
        </div>
        <div :style="textareaStackStyle">
          <span :style="docLabelStyle">Disabled</span>
          <CpTextarea v-model="value" label="Textarea label" placeholder="Enter your message here" :disabled="true" />
        </div>
        <div :style="textareaStackStyle">
          <span :style="docLabelStyle">Invalid</span>
          <CpTextarea
            v-model="value"
            label="Textarea label"
            placeholder="Enter your message here"
            :is-invalid="true"
            error-message="This field is required"
          />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Variants                                                                   */
/* -------------------------------------------------------------------------- */

/**
 * Enforce a character limit; a counter is shown below the field.
 */
export const WithMaxLength: Story = {
  args: {
    ...Default.args,
    maxLength: 100,
    label: 'Limited Textarea',
    placeholder: 'Enter up to 100 characters',
  },
}

/**
 * Adjust the number of visible rows through the `rows` prop.
 */
export const CustomRows: Story = {
  args: {
    ...Default.args,
    rows: 6,
    label: 'Large Textarea',
    placeholder: 'Enter a longer message',
  },
}