import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MemoryRouter } from 'react-router';
import { enumToObj } from '../../../helpers/storybook';
import { IconName } from '../../Icons';
import { PageHeaderAction } from './PageHeaderAction';
import { PageHeaderActionType } from './PageHeaderAction.model';

const iconOptions = enumToObj(IconName);
const actionTypeOptions = enumToObj(PageHeaderActionType);

const meta: Meta<typeof PageHeaderAction> = {
  component: PageHeaderAction,
  title: 'Other Components/PageHeaderAction',
  argTypes: {
    actionType: {
      control: {
        type: 'radio',
      },
      options: actionTypeOptions,
    },
    icon: {
      control: {
        type: 'select',
      },
      options: iconOptions,
    },
    path: {
      control: {
        type: 'text',
      },
    },
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <MemoryRouter>
        <Story />
      </MemoryRouter>
    ),
  ],
};
export default meta;

export const Default: StoryObj<typeof PageHeaderAction> = {};

export const CustomImage: StoryObj<typeof PageHeaderAction> = {
  args: {
    icon: '/images/default_image.svg',
    label: 'Custom Image',
    actionType: PageHeaderActionType.Context,
  },
};
