import React from 'react';
import {Meta, StoryFn} from '@storybook/react';

import Button from './index';
import {
  ButtonColorType,
  ButtonProps,
  ButtonSizeType,
  ButtonVariantType,
} from './interfaces';

const meta: Meta<typeof Button> = {
  title: 'Button',
  component: Button,
  argTypes: {
    size: {control: 'radio', options: Object.values(ButtonSizeType)},
    color: {
      control: 'select',
      options: Object.values(ButtonColorType),
    },
    leftIconName: {
      control: 'radio',
      options: [undefined, 'home', 'homeFill', 'chatFill', 'apps'],
    },
    rightIconName: {
      control: 'radio',
      options: [undefined, 'home', 'homeFill', 'chatFill', 'apps'],
    },
    variant: {control: 'radio', options: Object.values(ButtonVariantType)},
  },
};

const Template: StoryFn<ButtonProps> = args => <Button {...args} />;

const COMMON_ARGS = {
  text: 'Accept',
  disabled: false,
  size: ButtonSizeType.large,
  color: ButtonColorType.primary,
  loading: false,
  leftIconName: undefined,
  rightIconName: undefined,
};

export const Contained = Template.bind({});
Contained.args = {
  ...COMMON_ARGS,
  variant: 'contained',
};

export const Outlined = Template.bind({});
Outlined.args = {
  ...COMMON_ARGS,
  variant: 'outlined',
};

export const Text = Template.bind({});
Text.args = {
  ...COMMON_ARGS,
  variant: 'text',
};

export default meta;