import React, {useState} from 'react';
import {Meta, StoryObj} from '@storybook/react';
import {action} from '@storybook/addon-actions';

import {AIButton as AIButtonComponent} from './index';

type Props = React.ComponentProps<typeof AIButtonComponent>;
type Story = StoryObj<typeof AIButtonComponent>;

function InteractiveAIButton(args: Props) {
  const [isInProgress, setIsInProgress] = useState(args.isInProgress ?? false);

  const onPress = () => {
    action('onPress')();
    setIsInProgress(prev => !prev);
  };

  return (
    <AIButtonComponent
      {...args}
      isInProgress={isInProgress}
      onPress={onPress}
    />
  );
}

const argTypes = {
  text: {control: 'text'},
  size: {control: 'radio', options: ['sm', 'lg']},
  disabled: {control: 'boolean'},
  isInProgress: {control: 'boolean'},
};

const meta: Meta<typeof AIButtonComponent> = {
  title: 'HuGo/Buttons/AIButton',
  component: AIButtonComponent,
  argTypes,
  args: {
    text: 'AI button',
    size: 'sm',
    disabled: false,
    isInProgress: false,
  },
};

export const AIButton: Story = {};

export const Large: Story = {
  args: {
    text: 'Button Large',
    size: 'lg',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

export const InProgress: Story = {
  args: {
    isInProgress: true,
  },
};

export const Interactive: Story = {
  args: {
    text: 'Generate',
  },
  render: args => <InteractiveAIButton {...args} />,
};

export default meta;
