import { Meta, StoryObj } from "@storybook/react";
import NumberInput, { NumberInputProps } from "./NumberInput";
import { useState } from "react";

const meta = {
  title: "component/Input/NumberInput",
  component: NumberInput,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof NumberInput>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = (args: NumberInputProps) => {
  const [inputValue, setInputValue] = useState("");

  const handleOnChange = (value: string) => {
    setInputValue(value);
  };

  const handleOnError = () => {
    return false;
  };

  return (
    <NumberInput
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onError={handleOnError}
      attributes={{ "min": args.min, "max": args.max }}
    />
  );
};

Default.args = {
  value: "",
  unit: "개",
  enableButton: true,
};

export const Error: Story = (args: NumberInputProps) => {
  const [inputValue, setInputValue] = useState("");

  const handleOnChange = (value: string) => {
    setInputValue(value);
  };

  const handleOnError = () => {
    return true;
  };

  return (
    <NumberInput
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onError={handleOnError}
      attributes={{ "min": args.min, "max": args.max }}
    />
  );
};

Error.args = {
  value: "",
  unit: "kg",
  onError: () => true,
  enableButton: true,
};
