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

// QuickAddButton filters to Actions and Gateways (excludes Events, Triggers,
// Conditions).  The store must contain matching components so the button and
// its popup have something to display.
const mockComponents = [
  { plugin: 'action:save_entity', label: 'Save Entity', category: 'Actions', componentType: 4 },
  { plugin: 'action:send_email', label: 'Send Email', category: 'Actions', componentType: 4 },
  { plugin: 'action:set_field', label: 'Set Field Value', category: 'Actions', componentType: 4 },
  { plugin: 'action:publish', label: 'Publish Content', category: 'Actions', componentType: 4 },
  { plugin: 'gateway:exclusive', label: 'Exclusive Gateway', category: 'Gateways', componentType: 3 },
  { plugin: 'gateway:parallel', label: 'Parallel Gateway', category: 'Gateways', componentType: 3 },
];

const meta: Meta<typeof QuickAddButton> = {
  title: 'Components/QuickAddButton',
  component: QuickAddButton,
  decorators: [
    withStore({
      initialState: {
        nodes: [],
        edges: [],
        components: mockComponents,
      },
    }),
  ],
  parameters: {
    layout: 'centered',
  },
  args: {
    onAddNode: fn(),
    disabled: false,
  },
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Whether the button is disabled',
    },
  },
};

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

/**
 * Default quick-add button (appears on node hover)
 */
export const Default: Story = {};

/**
 * Disabled state (e.g., canvas locked)
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
};
