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 { CompositeButton } from './CompositeButton';

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

const meta: Meta<typeof CompositeButton> = {
  title: 'Other Components/Buttons/CompositeButton',
  component: CompositeButton,
  argTypes: {
    icon: {
      control: {
        type: 'select',
      },
      options: iconOptions,
    },
    buttonContext: {
      control: {
        type: 'radio',
      },
      options: typeOptions,
    },
    type: {
      control: false,
    },
    onBlur: {
      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 compositeButton: StoryObj = {
  args: {
    type: 'button',
    text: 'Placeholder',
  },
};

/*
  return (
    <CompositeButton
      type="button"
      height={text('height', '50px')}
      width={text('width', '')}
      text={text('text', 'Placeholder')}
      icon={select<IconName>('Icon Name', iconOptions, IconName.ChevronRight)}
      iconPosition={select('Icon Position', ['left', 'right'], 'right')}
      buttonContext={select<ButtonContext>(
        'Button Type',
        typeOptions,
        ButtonContext.Context,
      )}
      disabled={boolean('Disabled?', false)}
      onButtonClicked={action('buttonClicked')}
    />
  );
  */
