import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { Input } from "../Input";
const meta = {
    title: "Components/Input",
    component: Input,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { Input } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { width: "400px" }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        size: {
            control: "radio",
            options: ["small", "medium", "large"],
            description: "The size of the input",
            table: {
                category: "Appearance",
                type: { summary: "string" },
                defaultValue: { summary: "medium" },
            },
        },
        disabled: {
            control: "boolean",
            description: "Whether the input is disabled",
            table: {
                category: "Behavior",
                type: { summary: "boolean" },
                defaultValue: { summary: "false" },
            },
        },
        hasError: {
            control: "boolean",
            description: "Whether the input is in an error state",
            table: {
                category: "Behavior",
                type: { summary: "boolean" },
                defaultValue: { summary: "false" },
            },
        },
        placeholder: {
            control: "text",
            description: "The placeholder text for the input",
            table: {
                category: "Content",
                type: { summary: "string" },
            },
        },
        value: {
            control: "text",
            description: "The value of the input",
            table: {
                category: "Content",
                type: { summary: "string" },
            },
        },
        onChange: {
            control: false,
            description: "The function to call when the input value changes",
            table: {
                category: "Behavior",
                type: { summary: "function" },
            },
        },
        styles: {
            control: false,
            description: "Additional CSS styles to apply to the input",
            table: {
                category: "Styling",
            },
        },
        className: {
            control: false,
            description: "Additional CSS classes to apply to the input",
            table: {
                category: "Styling",
            },
        },
    },
    tags: ["!dev", "autodocs"],
};
export default meta;
export const Default = {
    args: {
        size: "medium",
        placeholder: "Enter text...",
        disabled: false,
    },
    render: (args) => (_jsx(Input, { size: args.size, placeholder: args.placeholder, disabled: args.disabled, value: args.value, onChange: args.onChange, hasError: args.hasError })),
};
export const ErrorState = {
    args: {
        size: "medium",
        placeholder: "Enter text...",
        disabled: false,
        hasError: true,
    },
    render: (args) => (_jsx(Input, { size: args.size, placeholder: args.placeholder, disabled: args.disabled, value: args.value, onChange: args.onChange, hasError: args.hasError })),
};
const ControlledInput = () => {
    const [value, setValue] = useState();
    return (_jsx(Input, { size: "medium", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Enter text..." }));
};
export const Controlled = {
    render: () => _jsx(ControlledInput, {}),
    parameters: {
        docs: {
            description: {
                story: "This is a controlled input example. The input value is managed by the component's state.",
            },
            source: {
                code: `
import { useState } from "react";

const ControlledInput = () => {
  const [value, setValue] = useState<string | undefined>();

  return <Input size="medium" value={value} onChange={(e) => setValue(e.target.value)} placeholder="Enter text..." />;
};`,
            },
        },
    },
};
const ValidatedInput = () => {
    const [value, setValue] = useState("");
    const hasError = value.length > 0 && (value.length < 3 || value.length > 10);
    return (_jsx(Input, { size: "medium", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Enter 3-10 characters", hasError: hasError }));
};
export const LengthValidation = {
    render: () => _jsx(ValidatedInput, {}),
    parameters: {
        docs: {
            description: {
                story: "Shows error when the value length is 1-2 or greater than 10 characters.",
            },
            source: {
                code: `
import { useState } from "react";

const ValidatedInput = () => {
  const [value, setValue] = useState<string>("");
  const hasError = value.length > 0 && (value.length < 3 || value.length > 10);
  return (
    <Input
      size="medium"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter 3-10 characters"
      isError={hasError}
    />
  );
};`,
            },
        },
    },
};
//# sourceMappingURL=Input.stories.js.map