import VTextarea from './VTextarea.vue';
import VFormField from './VFormField.vue'; // To demonstrate usage with VFormField
import type { Meta, StoryObj } from '@storybook/vue3';
import { ref } from 'vue'; // For v-model in stories

const meta: Meta<typeof VTextarea> = {
  title: 'Valerie/VTextarea',
  component: VTextarea,
  tags: ['autodocs'],
  argTypes: {
    modelValue: { control: 'text', description: 'Bound value using v-model.' },
    placeholder: { control: 'text' },
    disabled: { control: 'boolean' },
    required: { control: 'boolean' },
    rows: { control: 'number' },
    error: { control: 'boolean', description: 'Applies error styling.' },
    id: { control: 'text' },
    // 'update:modelValue': { action: 'updated' }
  },
  parameters: {
    docs: {
      description: {
        component: 'A textarea component for multi-line text input, supporting v-model, states, and customizable rows.',
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof VTextarea>;

// Template for v-model interaction in stories (similar to VInput)
const VModelTemplate: Story = {
  render: (args) => ({
    components: { VTextarea },
    setup() {
      const storyValue = ref(args.modelValue || '');
      const onInput = (newValue: string) => {
        storyValue.value = newValue;
        // context.emit('update:modelValue', newValue); // For SB actions
      }
      return { args, storyValue, onInput };
    },
    template: '<VTextarea v-bind="args" :modelValue="storyValue" @update:modelValue="onInput" />',
  }),
};

export const Basic: Story = {
  ...VModelTemplate,
  args: {
    id: 'basicTextarea',
    modelValue: 'This is some multi-line text.\nIt spans across multiple lines.',
  },
};

export const WithPlaceholder: Story = {
  ...VModelTemplate,
  args: {
    id: 'placeholderTextarea',
    placeholder: 'Enter your comments here...',
    modelValue: '',
  },
};

export const Disabled: Story = {
  ...VModelTemplate,
  args: {
    id: 'disabledTextarea',
    modelValue: 'This content cannot be changed.',
    disabled: true,
  },
};

export const Required: Story = {
  ...VModelTemplate,
  args: {
    id: 'requiredTextarea',
    modelValue: '',
    required: true,
    placeholder: 'This field is required',
  },
  parameters: {
    docs: {
      description: { story: 'The `required` attribute is set. Form submission behavior depends on the browser and form context.' },
    },
  },
};

export const ErrorState: Story = {
  ...VModelTemplate,
  args: {
    id: 'errorTextarea',
    modelValue: 'This text has some issues.',
    error: true,
  },
};

export const CustomRows: Story = {
  ...VModelTemplate,
  args: {
    id: 'customRowsTextarea',
    modelValue: 'This textarea has more rows.\nAllowing for more visible text.\nWithout scrolling initially.',
    rows: 5,
  },
};

export const FewerRows: Story = {
  ...VModelTemplate,
  args: {
    id: 'fewerRowsTextarea',
    modelValue: 'Only two rows here.',
    rows: 2,
  },
};


// Story demonstrating VTextarea used within VFormField
export const InFormField: Story = {
  render: (args) => ({
    components: { VTextarea, VFormField },
    setup() {
      const storyValue = ref(args.textareaArgs.modelValue || '');
      const onInput = (newValue: string) => {
        storyValue.value = newValue;
      }
      return { args, storyValue, onInput };
    },
    template: `
      <VFormField :label="args.formFieldArgs.label" :forId="args.textareaArgs.id" :errorMessage="args.formFieldArgs.errorMessage">
        <VTextarea
          v-bind="args.textareaArgs"
          :modelValue="storyValue"
          @update:modelValue="onInput"
        />
      </VFormField>
    `,
  }),
  args: {
    formFieldArgs: {
      label: 'Your Feedback',
      errorMessage: '',
    },
    textareaArgs: {
      id: 'feedbackField',
      modelValue: '',
      placeholder: 'Please provide your detailed feedback...',
      rows: 4,
      error: false,
    },
  },
   parameters: {
    docs: {
      description: { story: '`VTextarea` used inside a `VFormField`. The `id` on `VTextarea` should match `forId` on `VFormField`.' },
    },
  },
};

export const InFormFieldWithError: Story = {
  ...InFormField, // Inherit render function
  args: {
    formFieldArgs: {
      label: 'Description',
      errorMessage: 'The description is too short.',
    },
    textareaArgs: {
      id: 'descriptionFieldError',
      modelValue: 'Too brief.',
      placeholder: 'Provide a detailed description',
      rows: 3,
      error: true, // Set VTextarea's error state
    },
  },
};
