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 { ButtonContext } from '../Button.model';
import { Button } from './Button';

const iconOptions = enumToObj(IconName);
const typeOptions = enumToObj(ButtonContext);

const meta: Meta<typeof Button> = {
  title: 'Other Components/Buttons/Button',
  component: Button,
  argTypes: {
    icon: {
      control: {
        type: 'select',
      },
      options: iconOptions,
    },
    buttonContext: {
      control: {
        type: 'radio',
      },
      options: typeOptions,
    },
    onBlur: {
      control: false,
    },
    type: {
      control: false,
    },
    width: {
      control: {
        type: 'number',
      },
    },
    height: {
      control: {
        type: 'number',
      },
    },
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <MemoryRouter>
        <Story />
      </MemoryRouter>
    ),
  ],
};

export default meta;

export const button: StoryObj<typeof Button> = {
  args: {
    type: 'button',
  },
};
