/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
import * as React from "react";
import { FEAGlobals } from "../../../common/Globals";
const DIALOG_INPUT_BASE_CLASS = "dialog-input";
/**
 * A big text field that's shown on dialogs.
 */
export const FinsembleDialogTextInput = (props) => {
    var _a, _b, _c;
    const [textValue, setTextValue] = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
    const textInput = React.useRef(null);
    const inputPatternRegEx = props.inputPattern ? new RegExp(props.inputPattern) : undefined;
    /**
     * Focuses the input field.
     */
    const focusInput = () => {
        var _a;
        if ((_a = textInput === null || textInput === void 0 ? void 0 : textInput.current) === null || _a === void 0 ? void 0 : _a.focus)
            textInput.current.focus();
    };
    /**
     * Listens for the shown event so it can focus the input.
     */
    React.useEffect(() => {
        if (props.focusOnShow) {
            FEAGlobals.finsembleWindow.addEventListener("shown", focusInput);
        }
        return () => {
            if (props.focusOnShow) {
                FEAGlobals.finsembleWindow.removeEventListener("shown", focusInput);
            }
        };
    }, [props.focusOnShow]);
    React.useEffect(() => {
        var _a;
        if (props.value !== textValue) {
            setTextValue((_a = props.value) !== null && _a !== void 0 ? _a : "");
        }
    }, [props.value]);
    const placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : "";
    const classes = `${(_c = props.className) !== null && _c !== void 0 ? _c : ""} ${DIALOG_INPUT_BASE_CLASS}`;
    /**
     * If the input is a match for the props.inputPattern regular expression, then pass on the change
     *
     * @param {React.ChangeEvent<HTMLInputElement>} e
     */
    const changeEvent = (e) => {
        if (inputPatternRegEx === undefined || e.target.value.match(inputPatternRegEx)) {
            props.onInputChange(e);
            setTextValue(e.target.value);
        }
        else {
            FEAGlobals.FSBL.Clients.Logger.system.debug(`FinsembleDialogTextInput: input '${e.target.value}' failed to match against props.inputPattern '${props.inputPattern}'`);
        }
    };
    return (React.createElement("div", { className: classes },
        React.createElement("label", { htmlFor: "single-input" }, props.inputLabel || ""),
        React.createElement("div", { className: "form-group" },
            React.createElement("input", { id: "single-input", autoFocus: props.autoFocus, type: "text", maxLength: props.maxLength, onChange: changeEvent, placeholder: placeholder, ref: textInput, value: textValue, "aria-label": props.ariaLabel })),
        props.children));
};
//# sourceMappingURL=FinsembleDialogTextInput.js.map