import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Knowledge } from 'icons';
import { colors } from 'theme/color';
import { Fab } from './index';

export default {
  title: 'Design System/Fab',
  component: Fab,
  argTypes: {
    variant: {
      options: ['plain', 'outline'],
      control: { type: 'select' },
    },
    colorVariant: {
      options: ['transparent', 'base', 'base-01', 'success', 'success-01'],
      control: { type: 'select' },
    },
    sizeVariant: {
      options: [
        'transparent',
        'primary',
        'primary-hover',
        'base',
        'base-hover',
        'base-01',
        'base-02',
        'base-02-hover',
        'base-opacity-05',
        'base-opacity-06',
        'body',
        'success',
        'success-01',
        'secondary',
        'secondary-01',
        'secondary-hover',
      ],
      control: { type: 'select' },
    },
    hoverColorVariant: {
      options: colors,
      control: { type: 'select' },
    },
    shapeVariant: {
      options: ['round', 'circle'],
      control: { type: 'select' },
    },
    underlayColor: {
      options: colors,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Fab>;

const Template: ComponentStory<typeof Fab> = (args) => {
  return <Fab {...args} centerElement={<Knowledge />} />;
};

export const Interactive = Template.bind({});
Interactive.args = {
  variant: 'outline',
  colorVariant: 'base',
  sizeVariant: 'medium',
  shapeVariant: 'circle',
  hoverColorVariant: 'primary',
  underlayColor: 'primary',
  onPress: () => {},
};