import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import QuickAddEventButton from './QuickAddEventButton';
import { withStore } from '../../.storybook/decorators';

// QuickAddEventButton filters to Events and Triggers.  Without matching
// components in the store, hasEvents is false and the button renders null.
const mockComponents = [
  { plugin: 'content_entity:insert', label: 'Content Insert', category: 'Events', componentType: 1 },
  { plugin: 'content_entity:update', label: 'Content Update', category: 'Events', componentType: 1 },
  { plugin: 'user:login', label: 'User Login', category: 'Events', componentType: 1 },
  { plugin: 'cron', label: 'Cron Run', category: 'Triggers', componentType: 1 },
];

const meta: Meta<typeof QuickAddEventButton> = {
  title: 'Components/QuickAddEventButton',
  component: QuickAddEventButton,
  decorators: [
    withStore({
      initialState: {
        nodes: [],
        edges: [],
        components: mockComponents,
      },
    }),
    (Story: React.ComponentType) => (
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '8px', background: '#fff', borderBottom: '1px solid #e0e0e0' }}>
        <Story />
      </div>
    ),
  ],
  parameters: {
    layout: 'padded',
  },
  args: {
    onAddEvent: fn(),
    disabled: false,
  },
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Whether the button is disabled',
    },
  },
};

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

/**
 * Default "New event" toolbar button for adding event/start nodes.
 * Rendered in the toolbar-left section as the first element.
 */
export const Default: Story = {};

/**
 * Disabled state - button is not rendered when disabled
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

/**
 * Controlled open state with popup visible
 */
export const ControlledOpen: Story = {
  args: {
    isOpen: true,
    onOpenChange: fn(),
  },
};
