'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
export const MaskedField = (props)=>{
    const { field, path, value: propValue, setValue: propSetValue, onChange: propOnChange } = props || {};
    const [internalValue, setInternalValue] = useState(propValue ?? '');
    const [revealed, setRevealed] = useState(false);
    const label = typeof field?.label === 'string' ? field.label : field?.name ?? path;
    const handleChange = (e)=>{
        const newVal = e.target.value;
        setInternalValue(newVal);
        if (typeof propSetValue === 'function') {
            propSetValue(newVal);
        }
        if (typeof propOnChange === 'function') {
            propOnChange(e);
        }
    };
    const currentValue = propValue !== undefined ? propValue : internalValue;
    return /*#__PURE__*/ _jsxs("div", {
        className: "field-type text",
        children: [
            label && /*#__PURE__*/ _jsx("label", {
                className: "field-label",
                children: label
            }),
            /*#__PURE__*/ _jsxs("div", {
                style: {
                    display: 'flex',
                    gap: '.5rem'
                },
                children: [
                    /*#__PURE__*/ _jsx("input", {
                        autoComplete: "off",
                        onChange: handleChange,
                        style: {
                            flex: 1
                        },
                        type: revealed ? 'text' : 'password',
                        value: currentValue ?? ''
                    }),
                    /*#__PURE__*/ _jsx("button", {
                        onClick: ()=>setRevealed((r)=>!r),
                        type: "button",
                        children: revealed ? 'Hide' : 'Reveal'
                    })
                ]
            })
        ]
    });
};
export default MaskedField;

//# sourceMappingURL=MaskedField.js.map