import VButton from './VButton.vue';
import VIcon from './VIcon.vue'; // Import VIcon to ensure it's registered for stories if needed
import type { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof VButton> = {
  title: 'Valerie/VButton',
  component: VButton,
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'neutral', 'danger'],
    },
    size: {
      control: 'radio',
      options: ['sm', 'md', 'lg'],
    },
    disabled: { control: 'boolean' },
    iconLeft: {
      control: 'select',
      options: [null, 'alert', 'search', 'close'], // Example icons
    },
    iconRight: {
      control: 'select',
      options: [null, 'alert', 'search', 'close'], // Example icons
    },
    iconOnly: { control: 'boolean' },
    type: {
      control: 'select',
      options: ['button', 'submit', 'reset'],
    },
    // Slot content is not easily controllable via args table in the same way for default slot
    // We can use render functions or template strings in stories for complex slot content.
  },
  // Register VIcon globally for these stories if VButton doesn't always explicitly import/register it
  // decorators: [() => ({ template: '<VIcon /><story/>' })], // This is one way, or ensure VButton registers it
};

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

export const Primary: Story = {
  args: {
    label: 'Primary Button',
    variant: 'primary',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Secondary Button',
    variant: 'secondary',
  },
};

export const Neutral: Story = {
  args: {
    label: 'Neutral Button',
    variant: 'neutral',
  },
};

export const Danger: Story = {
  args: {
    label: 'Danger Button',
    variant: 'danger',
  },
};

export const Small: Story = {
  args: {
    label: 'Small Button',
    size: 'sm',
  },
};

export const Large: Story = {
  args: {
    label: 'Large Button',
    size: 'lg',
  },
};

export const Disabled: Story = {
  args: {
    label: 'Disabled Button',
    disabled: true,
  },
};

export const WithIconLeft: Story = {
  args: {
    label: 'Icon Left',
    iconLeft: 'search', // Example icon
  },
};

export const WithIconRight: Story = {
  args: {
    label: 'Icon Right',
    iconRight: 'alert', // Example icon
  },
};

export const IconOnly: Story = {
  args: {
    label: 'Search', // Label for accessibility, will be visually hidden
    iconLeft: 'search', // Or iconRight
    iconOnly: true,
    ariaLabel: 'Search Action', // It's good practice to ensure an aria-label for icon-only buttons
  },
};

export const IconOnlySmall: Story = {
  args: {
    label: 'Close',
    iconLeft: 'close',
    iconOnly: true,
    size: 'sm',
    ariaLabel: 'Close Action',
  },
};


export const WithCustomSlotContent: Story = {
  render: (args) => ({
    components: { VButton, VIcon },
    setup() {
      return { args };
    },
    template: `
      <VButton v-bind="args">
        <em>Italic Text</em> & <VIcon name="alert" size="sm" />
      </VButton>
    `,
  }),
  args: {
    variant: 'primary',
    // label is ignored when slot is used
  },
};

export const AsSubmitButton: Story = {
  args: {
    label: 'Submit Form',
    type: 'submit',
    variant: 'primary',
    iconLeft: 'alert', // Example, not typical for submit
  },
  // You might want to add a form in the story to see it in action
  // decorators: [() => ({ template: '<form @submit.prevent="() => alert(\'Form Submitted!\')"><story/></form>' })],
};
