import { useState } from "react";
import { useInputValidation } from "../../../hook/useInputValidation";
import { cx } from "../../../utils";
import * as styles from "./input.css";
let Eye = () => null;
let EyeClosed = () => null;
/**
 * A basic text input component with built-in validation support.
 *
 * @remarks
 * This component integrates with `useInputValidation` to handle real-time validation,
 * error reporting, and formatting. It supports all standard HTML input attributes.
 *
 * @param props - The component props.
 * @returns The rendered input element.
 *
 * @example
 * ```tsx
 * import { string, minLength } from 'valibot';
 * import { Input } from './input';
 *
 * const nameSchema = string([minLength(2)]);
 *
 * function NameField() {
 *   return (
 *     <Input
 *       name="fullName"
 *       placeholder="Enter your name"
 *       validate={nameSchema}
 *       onValidationError={(issues) => console.log(issues)}
 *     />
 *   );
 * }
 * ```
 */
export function Input({ className = "", validate, onValidationError, onBlur, onChange, ...props }) {
    let handlers = useInputValidation({
        name: props.name,
        validate,
        required: props.required,
        onValidationError,
        onChange,
        onBlur,
    });
    return (<input {...props} onChange={handlers.onChange} onBlur={handlers.onBlur} className={cx(styles.input, className)}/>);
}
/**
 * A password input component with a toggle to show/hide the password.
 *
 * @remarks
 * Wraps the {@link Input} component and adds a button to toggle the `type` attribute
 * between "password" and "text".
 *
 * @param props - The component props.
 * @returns The rendered password input with a toggle button.
 *
 * @example
 * ```tsx
 * import { string, minLength } from 'valibot';
 * import { Password } from './input';
 *
 * const passwordSchema = string([minLength(8)]);
 *
 * function PasswordField() {
 *   return (
 *     <Password
 *       name="password"
 *       validate={passwordSchema}
 *       autoComplete="current-password"
 *     />
 *   );
 * }
 * ```
 */
export function Password({ children, ...props }) {
    let [type, setType] = useState("password");
    function handleShow() {
        setType("text");
    }
    function handleHide() {
        setType("password");
    }
    return (<div className={styles.password}>
			<Input {...props} type={type}/>
			<button className={styles.switchView} type="button" onMouseDown={handleShow} onMouseUp={handleHide}>
				{type === "text" && <Eye />}
				{type === "password" && <EyeClosed />}
			</button>
		</div>);
}