import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { TextInput } from "./TextInput";
import { fn } from "storybook/test";

/** Reusable TextInput Component */
const meta: Meta<typeof TextInput> = {
  title: "UI/TextInput",
  component: TextInput,
  tags: ["autodocs"],
  args: {
    disabled: false,
    placeholder: "Placeholder",
    "aria-invalid": false,
    "aria-errormessage": "",
    label: "",
    type: "text",
    onChange: fn(),
    onFocus: fn(),
    onBlur: fn(),
    onError: fn(),
  },
  argTypes: {
    "aria-invalid": {
      control: { type: "boolean" },
    },
    "aria-errormessage": {
      control: { type: "text" },
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {} satisfies Story;

export const Disabled = {
  args: {
    disabled: true,
  },
} satisfies Story;

export const WithLabel = {
  args: {
    label: "Label",
  },
} satisfies Story;

export const Email = {
  args: {
    type: "email",
    label: "Email",
    placeholder: "example@email.com",
  },
  render: (args) => (
    <div className="flex flex-col gap-2">
      <TextInput {...args} />
      <TextInput {...args} value={"Email"} />
    </div>
  ),
} satisfies Story;

export const Invalid = {
  args: {
    label: "Email",
    "aria-invalid": true,
    "aria-errormessage": "Invalid email",
  },
} satisfies Story;
