import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import Annotation from './Annotation';

const meta: Meta<typeof Annotation> = {
  title: 'Components/Annotation',
  component: Annotation,
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story: React.ComponentType) => (
      <div style={{ width: 220, height: 120, position: 'relative', border: '1px solid #e0e0e0', borderRadius: 8, padding: 16 }}>
        <Story />
      </div>
    ),
  ],
  args: {
    annotation: 'This is a sample annotation note.',
    isVisible: false,
    onToggle: fn(),
    offset: false,
  },
  argTypes: {
    annotation: {
      control: 'text',
      description: 'Annotation text content',
    },
    isVisible: {
      control: 'boolean',
      description: 'Whether the annotation label is visible',
    },
    offset: {
      control: 'boolean',
      description: 'Whether to apply offset positioning to the label',
    },
  },
};

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

/**
 * Icon only (annotation collapsed)
 */
export const Default: Story = {};

/**
 * Annotation text visible
 */
export const Visible: Story = {
  args: {
    isVisible: true,
  },
};

/**
 * Visible with offset positioning
 */
export const VisibleWithOffset: Story = {
  args: {
    isVisible: true,
    offset: true,
  },
};

/**
 * Long annotation text
 */
export const LongText: Story = {
  args: {
    annotation: 'This is a very long annotation that describes the purpose of this component in great detail, including edge cases and special handling requirements.',
    isVisible: true,
  },
};

/**
 * Without toggle handler (read-only)
 */
export const ReadOnly: Story = {
  args: {
    annotation: 'Read-only annotation',
    isVisible: true,
    onToggle: undefined,
  },
};
