import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import classes from '../../../.storybook/static/css/confirm-dialog.scss';
import { createGroups, enumToObj } from '../../helpers/storybook';
import { ActionData } from '../Actions';
import { ButtonContext } from '../Buttons/Button.model';
import { IconName } from '../Icons/Icons.models';
import { InlineMenu } from './InlineMenu';

const groups = createGroups({
  Content: ['actions', 'buttonIcon'],
  Behavior: ['onActionClick', 'onButtonClicked'],
  Styling: [
    'className',
    'width',
    'placement',
    'buttonClassName',
    'offsetSkidding',
    'offsetDistance',
    'addBackgroundOpacity',
    'showArrow',
  ],
});
const iconOptions = enumToObj(IconName);
const contextOptions = enumToObj(ButtonContext);

const meta: Meta<typeof InlineMenu> = {
  title: 'Other Components/InlineMenu',
  component: InlineMenu,
  argTypes: {
    ...groups,
    actions: {
      ...groups.actions,
      control: false,
    },
    buttonIcon: {
      ...groups.buttonIcon,
      control: {
        type: 'select',
      },
      options: iconOptions,
    },
    buttonContext: {
      ...groups.buttonContext,
      control: {
        type: 'radio',
      },
      options: contextOptions,
    },
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <div className={classes.container}>
        <Story />
      </div>
    ),
  ],
};
export default meta;

const defaultActions: ActionData[] = [
  {
    label: 'Action One',
    onActionSelected: action(`onActionSelected (Action One)`),
  },
  {
    label: 'Action Two',
    onActionSelected: action('onActionSelected (Action Two)'),
    confirmationMode: 'Simple',
  },
  {
    label: 'Action Three',
    onActionSelected: action('onActionSelected (Action Three)'),
  },
];

export const Default: StoryObj<typeof InlineMenu> = {
  args: {
    actions: defaultActions,
  },
};
