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

import {InputYearMonthPicker} from './index';

const meta: Meta<typeof InputYearMonthPicker> = {
  title: 'HuGo/Inputs/InputYearMonthPicker',
  component: InputYearMonthPicker,
  argTypes: {
    label: {type: 'string'},
    placeholder: {type: 'string'},
    helper: {type: 'string'},
    disabled: {type: 'boolean'},
    isError: {type: 'boolean'},
    isSuccess: {type: 'boolean'},
    size: {
      control: 'select',
      options: ['sm', 'lg'],
      defaultValue: 'lg',
    },
    value: {control: 'date'},
  },
};

type Story = StoryObj<typeof InputYearMonthPicker>;

export const InputYearMonthPickerComponent: Story = {
  args: {
    label: 'Label',
    placeholder: 'MM/YYYY',
    helper: 'Helper',
    disabled: false,
    isError: false,
    isSuccess: false,
    size: 'lg',
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>(
      args.value ? new Date(args.value) : undefined,
    );

    return <InputYearMonthPicker value={value} onChange={setValue} {...args} />;
  },
};

export const SmallInputYearMonthPicker: Story = {
  args: {
    ...InputYearMonthPickerComponent.args,
    size: 'sm',
  },
  render: InputYearMonthPickerComponent.render,
};

export const InputYearMonthPickerWithValue: Story = {
  args: {
    ...InputYearMonthPickerComponent.args,
    value: new Date(2024, 5, 15),
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>(
      args.value ? new Date(args.value) : undefined,
    );

    return <InputYearMonthPicker value={value} onChange={setValue} {...args} />;
  },
};

export const InputYearMonthPickerError: Story = {
  args: {
    ...InputYearMonthPickerComponent.args,
    isError: true,
    helper: 'Error message',
  },
  render: InputYearMonthPickerComponent.render,
};

export const InputYearMonthPickerSuccess: Story = {
  args: {
    ...InputYearMonthPickerComponent.args,
    isSuccess: true,
    helper: 'Success message',
  },
  render: InputYearMonthPickerComponent.render,
};

export const InputYearMonthPickerDisabled: Story = {
  args: {
    ...InputYearMonthPickerComponent.args,
    disabled: true,
  },
  render: InputYearMonthPickerComponent.render,
};

export default meta;
