import VFormField from './VFormField.vue';
import type { Meta, StoryObj } from '@storybook/vue3';

// A simple placeholder input component for demonstration purposes in stories
const VInputPlaceholder = {
  template: '<input :id="id" type="text" :placeholder="placeholder" style="border: 1px solid #ccc; padding: 0.5em; border-radius: 4px; width: 100%;" />',
  props: ['id', 'placeholder'],
};


const meta: Meta<typeof VFormField> = {
  title: 'Valerie/VFormField',
  component: VFormField,
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    forId: { control: 'text', description: 'ID of the input element this label is for. Should match the id of the slotted input.' },
    errorMessage: { control: 'text' },
    // Default slot is not directly configurable via args table in a simple way,
    // so we use render functions or template strings in stories.
  },
  parameters: {
    docs: {
      description: {
        component: 'A wrapper component to structure form fields with a label, the input element itself (via slot), and an optional error message.',
      },
    },
  },
};

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

export const WithLabelAndInput: Story = {
  render: (args) => ({
    components: { VFormField, VInputPlaceholder },
    setup() {
      return { args };
    },
    template: `
      <VFormField :label="args.label" :forId="args.forId">
        <VInputPlaceholder id="nameInput" placeholder="Enter your name" />
      </VFormField>
    `,
  }),
  args: {
    label: 'Full Name',
    forId: 'nameInput', // This should match the ID of the VInputPlaceholder
    errorMessage: '',
  },
};

export const WithLabelInputAndError: Story = {
  render: (args) => ({
    components: { VFormField, VInputPlaceholder },
    setup() {
      return { args };
    },
    template: `
      <VFormField :label="args.label" :forId="args.forId" :errorMessage="args.errorMessage">
        <VInputPlaceholder id="emailInput" placeholder="Enter your email" />
      </VFormField>
    `,
  }),
  args: {
    label: 'Email Address',
    forId: 'emailInput',
    errorMessage: 'Please enter a valid email address.',
  },
};

export const InputOnlyNoError: Story = {
  render: (args) => ({
    components: { VFormField, VInputPlaceholder },
    setup() {
      return { args };
    },
    template: `
      <VFormField :errorMessage="args.errorMessage">
        <VInputPlaceholder id="searchInput" placeholder="Search..." />
      </VFormField>
    `,
  }),
  args: {
    label: '', // No label
    forId: '',
    errorMessage: '', // No error
  },
};

export const InputWithErrorNoLabel: Story = {
  render: (args) => ({
    components: { VFormField, VInputPlaceholder },
    setup() {
      return { args };
    },
    template: `
      <VFormField :errorMessage="args.errorMessage">
        <VInputPlaceholder id="passwordInput" type="password" placeholder="Enter password" />
      </VFormField>
    `,
  }),
  args: {
    label: '',
    forId: '',
    errorMessage: 'Password is required.',
  },
};

export const WithLabelNoErrorNoInputId: Story = {
  render: (args) => ({
    components: { VFormField, VInputPlaceholder },
    setup() {
      return { args };
    },
    template: `
      <VFormField :label="args.label" :forId="args.forId">
        <!-- Input without an ID, label 'for' will not connect -->
        <VInputPlaceholder placeholder="Generic input" />
      </VFormField>
    `,
  }),
  args: {
    label: 'Description (Label `for` not connected)',
    forId: 'unmatchedId', // For attribute will be present but might not point to a valid input
    errorMessage: '',
  },
   parameters: {
    docs: {
      description: {
        story: "Demonstrates a label being present, but its `for` attribute might not link to the input if the input's ID is missing or doesn't match. This is valid but not ideal for accessibility.",
      },
    },
  },
};
