import React from 'react';
import {Meta, StoryObj} from '@storybook/react';
import {IconArrowLeft, IconArrowRight} from '@tabler/icons-react-native';

import {Button as ButtonComponent, ButtonProps} from './index';

type Story = StoryObj<ButtonProps & {rightIcon: boolean; leftIcon: boolean}>;

const argTypes = {
  text: {control: 'text'},
  variant: {
    control: 'radio',
    options: [
      'primary',
      'secondary',
      'tertiary',
      'flat',
      'secondaryActive',
      'error',
      'success',
    ],
  },
  size: {control: 'radio', options: ['lg', 'sm']},
  isLoading: {control: 'boolean'},
  disabled: {control: 'boolean'},
  rightIcon: {control: 'boolean'},
  leftIcon: {control: 'boolean'},
};

const meta: Meta = {
  title: 'HuGo/Buttons/Button',
  component: ButtonComponent,
  argTypes,
};

export const Button: Story = {
  args: {
    text: 'Submit',
    variant: 'primary',
    size: 'lg',
    isLoading: false,
    disabled: false,
    rightIcon: false,
    leftIcon: false,
  },
  render: args => {
    return (
      <ButtonComponent
        {...args}
        IconRight={args.rightIcon ? IconArrowRight : undefined}
        IconLeft={args.leftIcon ? IconArrowLeft : undefined}
      />
    );
  },
};

export default meta;
