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

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

export default meta;

type Story = StoryObj<typeof meta>;

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

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

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

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

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

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

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

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

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

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