import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import GetSvgIcon from "../GetSvgIcon";
import styles from "./styles.module.scss";
import { clsx } from "../../utils";
const InputFieldForm = ({ id, value, type = "text", placeholder = "", style = {}, disabled = false, errorState = false, props = {}, onChangeHandler, errorMessage = "Something went wrong!", name, autoComplete = "on", dataCyInput, dataCyToggle, inputFieldClassname, }) => {
    const [showPassword, setShowPassword] = useState(false);
    const togglePasswordVisibility = () => {
        setShowPassword((prevShowPassword) => !prevShowPassword);
    };
    const inputFieldClass = clsx({
        [styles.inputFieldGeneric]: true,
        [styles.errorInputField]: errorState,
    });
    return (_jsxs("div", { className: styles.parentInputfield, children: [_jsxs("div", { className: inputFieldClass, children: [_jsx("input", { id: id, type: showPassword ? "text" : type, disabled: disabled, style: style, placeholder: placeholder, value: value, onChange: onChangeHandler, name: name, ...props, autoComplete: autoComplete, "data-cy": dataCyInput, className: inputFieldClassname }), type === "password" && (_jsx("span", { className: styles.passwordToggle, onClick: togglePasswordVisibility, "data-cy": dataCyToggle, children: showPassword ? (_jsx(GetSvgIcon, { iconType: "eye", iconSize: "16" })) : (_jsx(GetSvgIcon, { iconType: "eyeOff", iconSize: "16" })) }))] }), errorState && _jsx("span", { children: errorMessage })] }));
};
export default InputFieldForm;
