import { Meta, StoryObj } from "@storybook/react";
import Input, { InputProps } from "./Input";
import { useState } from "react";

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

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = (args: InputProps) => {
  const [inputValue, setInputValue] = useState(args.value);

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleOnReset = () => {
    setInputValue("");
  };

  return (
    <Input
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onReset={handleOnReset}
    />
  );
};

Default.args = {
  value: "",
  placeholder: "default",
};

export const Error: Story = (args: InputProps) => {
  const [inputValue, setInputValue] = useState(args.value);

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

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

  const handleOnReset = () => {
    setInputValue("");
  };

  return (
    <Input
      {...args}
      value={inputValue}
      onChange={handleOnChange}
      onError={handleOnError}
      onReset={handleOnReset}
    />
  );
};

Error.args = {
  value: "",
  placeholder: "error",
  onError: () => true,
};
