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

// QuickAddConditionButton filters to Conditions and Decisions.  Without
// matching components in the store, hasConditions is false and the button
// renders null.
const mockComponents = [
  { plugin: 'condition:entity_is_new', label: 'Entity is New', category: 'Conditions', componentType: 2 },
  { plugin: 'condition:entity_field_value', label: 'Entity Field Value', category: 'Conditions', componentType: 2 },
  { plugin: 'condition:user_role', label: 'User Has Role', category: 'Conditions', componentType: 2 },
  { plugin: 'condition:content_is_published', label: 'Content is Published', category: 'Conditions', componentType: 2 },
];

const meta: Meta<typeof QuickAddConditionButton> = {
  title: 'Components/QuickAddConditionButton',
  component: QuickAddConditionButton,
  decorators: [
    withStore({
      initialState: {
        nodes: [],
        edges: [],
        components: mockComponents,
      },
    }),
  ],
  parameters: {
    layout: 'centered',
  },
  args: {
    edgeId: 'edge_1',
    onAddCondition: fn(),
    disabled: false,
  },
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Whether the button is disabled',
    },
    edgeId: {
      control: 'text',
      description: 'ID of the edge to attach the condition to',
    },
  },
};

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

/**
 * Default condition add button (appears on edge hover)
 */
export const Default: Story = {};

/**
 * Disabled state
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
};
