import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import "./style.scss";
import GetSvgIcon from "../GetSvgIcon";
import { useState } from "react";
const InputFieldWithSvg = ({ placeholder = "", iconType = "search", iconSize = "18", showIconOnLeft = false, defaultValue, onChange = () => { }, handleOnFocus = () => { }, onEnter = () => { }, dataCy, }) => {
    const [fieldFocused, setFieldFocused] = useState(false);
    const className = clsx({
        "inputFieldWithSvg--Container": true,
        "inputFieldWithSvg--Container-Focused": fieldFocused,
        "inputFieldWithSvg--RowReverse": showIconOnLeft,
    });
    const handleKeyPress = (event) => {
        if (event.key === "Enter") {
            onEnter();
        }
    };
    return (_jsxs("div", { className: className, children: [_jsx("input", { placeholder: placeholder, defaultValue: defaultValue, onFocus: () => {
                    setFieldFocused(true);
                    handleOnFocus();
                }, onBlur: () => setFieldFocused(false), onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyPress, "data-cy": `${dataCy}-input` }), _jsx("button", { className: "inputFieldWithSvg--SvgButton", "data-cy": `${dataCy}-submit`, children: _jsx(GetSvgIcon, { iconType: iconType, iconSize: iconSize }) })] }));
};
export default InputFieldWithSvg;
