import React, { useState } from 'react';
import Text from '../Text';
import { st, classes } from './LabelledElement.st.css.js';
import { DATA_HOOKS } from './LabelledElement.constants';
import { generateID } from '../utils/generateId';
const LabelledElement = ({ dataHook, label, value, topLabelGray, disabled, children, }) => {
    const [hasFocus, setHasFocus] = useState(false);
    const [inputValue, setInputValue] = useState();
    const inputId = `labelled-element-${generateID()}`;
    const isInputControlled = typeof value !== 'undefined';
    const isInputEmpty = isInputControlled ? !value : !inputValue;
    const hasTopLabel = hasFocus || !isInputEmpty;
    const handleOnChange = (event) => {
        if (!isInputControlled) {
            setInputValue(event.target.value);
        }
    };
    return (React.createElement("div", { className: classes.root, "data-hook": dataHook },
        React.createElement("label", { "data-hook": DATA_HOOKS.label, "data-top": hasTopLabel, htmlFor: inputId, className: st(classes.label, {
                labelTop: hasTopLabel,
                topLabelGray,
                disabled,
            }) },
            React.createElement(Text, { size: "medium", light: !hasTopLabel, secondary: !hasTopLabel, weight: "thin", className: classes.labelText }, label)),
        children && (React.createElement("div", { "data-hook": DATA_HOOKS.childrenWrapper }, children({
            id: inputId,
            onFocus: () => setHasFocus(true),
            onBlur: () => setHasFocus(false),
            onChange: handleOnChange,
            /** should have a different height than regular large input */
            className: classes.inputContainer,
            getPlaceholder: (placeholder) => hasTopLabel ? placeholder : '',
        })))));
};
LabelledElement.displayName = 'LabelledElement';
export default LabelledElement;
//# sourceMappingURL=LabelledElement.js.map