import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MemoryRouter } from 'react-router';
import { createGroups, generateItemArray } from '../../helpers/storybook';
import { Actions, ActionsProps } from './Actions';
import { ActionData } from './Actions.models';

const groups = createGroups({
  Content: ['actions'],
  Behavior: ['onActionClick'],
  Styling: ['width', 'className'],
  Storybook: ['amount', 'actionType', 'confirmationActions'],
});

const actionTypeOptions = {
  Navigation: 'Navigation',
  Context: 'Context',
  Random: 'Random',
};

const generateActions = (amount: number, actionType: string): ActionData[] =>
  generateItemArray(amount, (index) => {
    const label = `Action ${index + 1}`;
    const { Navigation, Context } = actionTypeOptions;

    const actions = {
      [Navigation]: {
        label,
        path: '#',
      },
      [Context]: {
        label,
        onActionSelected: action('ActionData.onActionSelected'),
      },
    };

    switch (actionType) {
      case Navigation:
      case Context:
        return actions[actionType];
      default:
        return Math.random() < 0.5 ? actions[Navigation] : actions[Context];
    }
  });

type ActionsStoryComponentProps = React.FC<
  ActionsProps & {
    confirmationActions: boolean;
    actionType: string;
    amount: number;
  }
>;

const meta: Meta<ActionsStoryComponentProps> = {
  title: 'Other Components/Actions',
  component: Actions,
  args: {
    confirmationActions: false,
    actionType: actionTypeOptions.Navigation,
    amount: 3,
  },
  argTypes: {
    ...groups,
    onActionClick: {
      ...groups.onActionClick,
      action: 'Actions.onActionClick',
    },
    confirmationActions: {
      ...groups.confirmationActions,
      description: '<b>[Storybook only]</b> Will add confirmation actions.',
      type: 'boolean',
      control: { type: 'boolean' },
    },
    amount: {
      ...groups.amount,
      description: '<b>[Storybook only]</b> The amount of actions to render.',
      type: 'number',
      control: { type: 'number', min: 0, max: 30 },
    },
    actionType: {
      ...groups.actionType,
      description: `<b>[Storybook only]</b> The type of actions to render.
      'Navigation' renders an actions with an anchor tag. 
      'Context' renders an actions with an onClick handler. 
      'Random' - a mix of both`,
      control: {
        type: 'radio',
      },
      options: actionTypeOptions,
    },
    actions: {
      ...groups.actions,
      control: false,
    },
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <MemoryRouter>
        <div style={{ height: 'calc(100vh - 32px)' }}>
          <Story />
        </div>
      </MemoryRouter>
    ),
  ],
};
export default meta;

export const Default: StoryObj<ActionsStoryComponentProps> = {
  render: (args) => {
    const actions = [
      ...(args.confirmationActions
        ? ([
            {
              label: 'Simple Confirmation',
              onActionSelected: action('itemClicked'),
              confirmationMode: 'Simple',
            },
            {
              label: 'Advanced Confirmation',
              onActionSelected: action('itemClicked'),
              confirmationMode: 'Advanced',
            },
            {
              label: 'Custom Advanced Confirmation',
              onActionSelected: action('itemClicked'),
              confirmationMode: 'Advanced',
              confirmationConfig: {
                body: 'Custom Body',
                title: 'Custom Title',
                cancelButtonText: 'Custom Cancel',
                confirmButtonText: 'Custom Confirm',
              },
            },
          ] as ActionData[])
        : []),
      ...generateActions(args.amount, args.actionType),
    ];
    return <Actions {...args} actions={actions.filter(Boolean)} />;
  },
  args: {},
};
