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

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

export default meta;

type Story = StoryObj<typeof meta>;

// 기본 Input
export const Default: Story = (
  args: FormInputProps<ReactNode>
) => {
  const [inputValue, setInputValue] = useState("");

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

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

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

Default.args = {
  label: "label",
  children: <div />,
  hintMessage: "hintmessage",
};

// 에러 Input
export const Error: Story = (args: FormInputProps<ReactNode>) => {
  const [inputValue, setInputValue] = useState("");

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

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

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

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

Error.args = {
  label: "label",
  children: <div />,
  errorMessage: "errormessage",
  onError: () => true,
};
