/* eslint-disable react-hooks/rules-of-hooks */
import React, {useState} from 'react';
import {Meta, StoryObj} from '@storybook/react';

import {InputMoney} from './index';

const meta: Meta<typeof InputMoney> = {
  title: 'HuGo/Inputs/InputMoney',
  component: InputMoney,
  argTypes: {
    label: {type: 'string'},
    helper: {type: 'string'},
    disabled: {type: 'boolean'},
    isError: {type: 'boolean'},
    isSuccess: {type: 'boolean'},
    currencySymbol: {type: 'string'},
    withDecimals: {type: 'boolean'},
    variant: {
      control: 'select',
      options: ['default', 'withCurrency'],
      defaultValue: 'default',
    },
  },
};

type Story = StoryObj<typeof InputMoney>;

export const InputMoneyComponent: Story = {
  args: {
    label: 'Label',
    helper: 'Helper',
    disabled: false,
    isError: false,
    isSuccess: false,
    currencySymbol: '$',
    withDecimals: true,
    variant: 'default',
  },
  render: args => {
    const [value, setValue] = useState('');
    return <InputMoney value={value} onChangeText={setValue} {...args} />;
  },
};

export const SmallInputMoney: Story = {
  args: {
    ...InputMoneyComponent.args,
    size: 'sm',
  },
  render: InputMoneyComponent.render,
};

export default meta;
