import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Row } from 'components/layout';
import { Dashboard, Learn } from 'icons';
import { colors } from 'theme/color';
import { Button } from './index';
const colorVariants = [
  'primary',
  'primary-hover',
  'secondary',
  'secondary-hover',
  'base',
  'title',
  'base-01',
  'base-02',
  'base-02',
  'base-03',
  'body',
  'divider',
  'caption',
  'transparent',
];

export default {
  title: 'Design System/Button',
  component: Button,
  argTypes: {
    variant: {
      options: ['outline', 'underline', 'outline-primary'],
      control: { type: 'select' },
    },

    colorVariant: {
      options: colorVariants,
      control: {
        type: 'select',
      },
    },
    shapeVariant: {
      options: ['round', 'square'],
      control: { type: 'select' },
    },
    borderColorVariant: {
      options: colorVariants,
      control: {
        type: 'select',
      },
    },
    titleColor: {
      options: colors,
      control: { type: 'select' },
    },
    sizeVariant: {
      options: [
        'undefined',
        'content',
        'extra-small',
        'small',
        'medium',
        'large',
        'extra-large',
        '2-extra-large',
      ],
      control: { type: 'select' },
    },
    hoverTitleColorVariant: {
      options: colorVariants,
      control: { type: 'select' },
    },
    hoverColorVariant: {
      options: colorVariants,
      control: { type: 'select' },
    },
    underlayColorVariant: {
      options: colors,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Button>;

export const Interactive: ComponentStory<typeof Button> = (args) => {
  return (
    <>
      <Row alignItems="center" mt="m">
        <Button {...args} />
        <Button ml={20} {...args} leftElement={<Learn />} />
        <Button ml={20} {...args} collapsedElement={<Dashboard />} rightElement={<Learn />} />
      </Row>
    </>
  );
};

Interactive.args = {
  shapeVariant: 'round',
  sizeVariant: 'medium',
  titleColor: 'title',
  title: 'I am button',
  colorVariant: 'primary',
  hoverColorVariant: 'primary',
  underlayColorVariant: 'primary',
  isCollapsed: false,
  collapsedWidth: 40,
  onPress: () => {},
};