import VInput from './VInput.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 VInput> = {
  title: 'Valerie/VInput',
  component: VInput,
  tags: ['autodocs'],
  argTypes: {
    modelValue: { control: 'text', description: 'Bound value using v-model.' }, // Or 'object' if number is frequent
    type: {
      control: 'select',
      options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search', 'date'],
    },
    placeholder: { control: 'text' },
    disabled: { control: 'boolean' },
    required: { control: 'boolean' },
    error: { control: 'boolean', description: 'Applies error styling.' },
    id: { control: 'text' },
    // 'update:modelValue': { action: 'updated' } // To show event in actions tab
  },
  parameters: {
    docs: {
      description: {
        component: 'A versatile input component with support for various types, states, and v-model binding.',
      },
    },
  },
  // Decorator to provide v-model functionality to stories if needed at a global level
  // decorators: [
  //   (story, context) => {
  //     const value = ref(context.args.modelValue || '');
  //     return story({ ...context, args: { ...context.args, modelValue: value, 'onUpdate:modelValue': (val) => value.value = val } });
  //   },
  // ],
};

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

// Template for v-model interaction in stories
const VModelTemplate: Story = {
  render: (args) => ({
    components: { VInput },
    setup() {
      // Storybook provides a mechanism to bind args, which includes modelValue.
      // For direct v-model usage in the template, we might need a local ref.
      // However, Storybook 7+ handles args updates automatically for controls.
      // If direct v-model="args.modelValue" doesn't work due to arg immutability,
      // use a local ref and update args on change.
      const storyValue = ref(args.modelValue || '');
      const onInput = (newValue: string | number) => {
        storyValue.value = newValue;
        // args.modelValue = newValue; // This might be needed if SB doesn't auto-update
        // For Storybook actions tab:
        // context.emit('update:modelValue', newValue);
      }
      return { args, storyValue, onInput };
    },
    // Note: Storybook's `args` are reactive. `v-model="args.modelValue"` might work directly in some SB versions.
    // Using a local ref `storyValue` and emitting an action is a robust way.
    template: '<VInput v-bind="args" :modelValue="storyValue" @update:modelValue="onInput" />',
  }),
};

export const Basic: Story = {
  ...VModelTemplate,
  args: {
    id: 'basicInput',
    modelValue: 'Hello Valerie',
  },
};

export const WithPlaceholder: Story = {
  ...VModelTemplate,
  args: {
    id: 'placeholderInput',
    placeholder: 'Enter text here...',
    modelValue: '',
  },
};

export const Disabled: Story = {
  ...VModelTemplate,
  args: {
    id: 'disabledInput',
    modelValue: 'Cannot change this',
    disabled: true,
  },
};

export const Required: Story = {
  ...VModelTemplate,
  args: {
    id: 'requiredInput',
    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: 'errorInput',
    modelValue: 'Incorrect value',
    error: true,
  },
};

export const PasswordType: Story = {
  ...VModelTemplate,
  args: {
    id: 'passwordInput',
    type: 'password',
    modelValue: 'secret123',
  },
};

export const EmailType: Story = {
  ...VModelTemplate,
  args: {
    id: 'emailInput',
    type: 'email',
    modelValue: 'test@example.com',
    placeholder: 'your.email@provider.com',
  },
};

export const NumberType: Story = {
  ...VModelTemplate,
  args: {
    id: 'numberInput',
    type: 'number',
    modelValue: 42,
    placeholder: 'Enter a number',
  },
};

// Story demonstrating VInput used within VFormField
export const InFormField: Story = {
  render: (args) => ({
    components: { VInput, VFormField },
    setup() {
      const storyValue = ref(args.inputArgs.modelValue || '');
      const onInput = (newValue: string | number) => {
        storyValue.value = newValue;
        // args.inputArgs.modelValue = newValue; // Update the nested arg for control sync
      }
      return { args, storyValue, onInput };
    },
    template: `
      <VFormField :label="args.formFieldArgs.label" :forId="args.inputArgs.id" :errorMessage="args.formFieldArgs.errorMessage">
        <VInput
          v-bind="args.inputArgs"
          :modelValue="storyValue"
          @update:modelValue="onInput"
        />
      </VFormField>
    `,
  }),
  args: {
    formFieldArgs: {
      label: 'Your Name',
      errorMessage: '',
    },
    inputArgs: {
      id: 'nameField',
      modelValue: 'Initial Name',
      placeholder: 'Enter your full name',
      error: false, // Controlled by formFieldArgs.errorMessage typically
    },
  },
   parameters: {
    docs: {
      description: { story: '`VInput` used inside a `VFormField`. The `id` on `VInput` should match `forId` on `VFormField`.' },
    },
  },
};

export const InFormFieldWithError: Story = {
  ...InFormField, // Inherit render function from InFormField
  args: {
    formFieldArgs: {
      label: 'Your Email',
      errorMessage: 'This email is invalid.',
    },
    inputArgs: {
      id: 'emailFieldWithError',
      modelValue: 'invalid-email',
      type: 'email',
      placeholder: 'Enter your email',
      error: true, // Set VInput's error state
    },
  },
};
