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

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

export default meta;

type Story = StoryObj<typeof meta>;

export const Passwprd_FormInput_Default: Story = (
  args: FormInputProps<ReactNode>
) => {
  const [inputValue, setInputValue] = useState("");

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

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

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

export const Passwprd_FormInput_Error: Story = (
  args: FormInputProps<ReactNode>
) => {
  const [inputValue, setInputValue] = useState("");

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

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

  return (
    <FormInput {...args}>
      <PasswordInput
        value={inputValue}
        onChange={handleOnChange}
        onError={handleOnError}
        placeholder="default"
      />
    </FormInput>
  );
};

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