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

const meta: Meta<typeof VBadge> = {
  title: 'Valerie/VBadge',
  component: VBadge,
  tags: ['autodocs'],
  argTypes: {
    text: { control: 'text' },
    variant: {
      control: 'select',
      options: ['secondary', 'accent', 'settled', 'pending'],
    },
    sticky: { control: 'boolean' },
  },
  parameters: {
    // Optional: Add notes about sticky behavior if it requires parent positioning
    notes: 'The `sticky` prop adds a `badge-sticky` class when the variant is `accent`. Actual sticky positioning (e.g., `position: absolute` or `position: sticky`) should be handled by the parent component or additional global styles if needed, as the component itself does not enforce absolute positioning.',
  },
};

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

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

export const Accent: Story = {
  args: {
    text: 'Accent',
    variant: 'accent',
  },
};

export const Settled: Story = {
  args: {
    text: 'Settled',
    variant: 'settled',
  },
};

export const Pending: Story = {
  args: {
    text: 'Pending',
    variant: 'pending',
  },
};

export const AccentSticky: Story = {
  args: {
    text: 'Sticky',
    variant: 'accent',
    sticky: true,
  },
  // To demonstrate the intended sticky positioning from the design,
  // we can wrap the component in a relatively positioned div for the story.
  decorators: [
    () => ({
      template: `
        <div style="position: relative; width: 100px; height: 30px; border: 1px dashed #ccc; padding: 10px; margin-top: 10px; margin-left:10px;">
          Parent Element
          <story />
        </div>
      `,
    }),
  ],
  // parameters: {
  //   notes: 'This story demonstrates the sticky badge in a positioned context. The `badge-sticky` class itself only adds a border in this example. The absolute positioning shown (top: -4px, right: -4px relative to parent) needs to be applied by the parent or via styles targeting `.badge-sticky` in context.',
  // }
  // The following is a more direct way to show the absolute positioning if we add it to the component for the sticky case
  // For now, the component itself doesn't add absolute positioning, so this shows how a parent might do it.
  // If VBadge itself were to handle `position:absolute` when `sticky` and `variant=='accent'`, this would be different.
};

// Story to show that `sticky` prop only affects `accent` variant
export const StickyWithNonAccentVariant: Story = {
  args: {
    text: 'Not Sticky',
    variant: 'secondary', // Not 'accent'
    sticky: true,
  },
  parameters: {
    notes: 'The `sticky` prop only applies the `.badge-sticky` class (and its associated styles like a border) when the variant is `accent`. For other variants, `sticky: true` has no visual effect on the badge itself.',
  }
};

export const LongText: Story = {
  args: {
    text: 'This is a very long badge text',
    variant: 'primary', // Assuming primary is a valid variant or falls back to default
  },
};