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

import {InputTime} from './index';

const meta: Meta<typeof InputTime> = {
  title: 'HuGo/Inputs/InputTime',
  component: InputTime,
  argTypes: {
    label: {type: 'string'},
    placeholder: {type: 'string'},
    helper: {type: 'string'},
    disabled: {control: 'boolean'},
    isError: {control: 'boolean'},
    isSuccess: {control: 'boolean'},
    minuteInterval: {control: 'radio', options: [1, 5, 10, 15, 30]},
  },
};

type Story = StoryObj<typeof InputTime>;

export const InputTimeComponent: Story = {
  args: {
    label: 'Label',
    placeholder: 'HH:MM',
    helper: 'Helper',
    disabled: false,
    isError: false,
    isSuccess: false,
    minuteInterval: 1,
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>();

    const onClearInput = () => setValue(undefined);

    return (
      <InputTime
        {...args}
        value={value}
        onChange={setValue}
        onClear={onClearInput}
      />
    );
  },
};

export const InputTimeComponentWithSize: Story = {
  args: {
    ...InputTimeComponent.args,
    size: 'sm',
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>();

    const onClearInput = () => setValue(undefined);

    return (
      <InputTime
        {...args}
        value={value}
        onChange={setValue}
        onClear={onClearInput}
      />
    );
  },
};

export default meta;
