/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
import React, { useEffect, useState } from "react";
import { Title } from "../../hooks/useTitle";
import { FinsembleDialog } from "../legacyControls/FinsembleDialog";
import { FinsembleDialogTextInput } from "../legacyControls/FinsembleDialogTextInput";
import { FinsembleDialogButton } from "../legacyControls/FinsembleDialogButton";
import "./SingleInputDialog.css";
import "../../assets/css/finsemble.css";
import "../../assets/css/dialogs.css";
import { FEAGlobals } from "../../../common/Globals";
/**
 * This is our standard input dialog. It gives the user a single button and a text field, and ferries that data
 * back to the window that opened it.
 */
const _SingleInputDialog = (props) => {
    var _a, _b;
    const [newRequest, setNewRequest] = useState(false);
    const [affirmativeResponseLabel, setAffirmativeResponseLabel] = useState("Yes");
    /** Our input uses the HTML autoFocus attribute. This only fires when the element is rendered for the 1st time.
     * Since we re-use the dialogs, the 2nd time the dialog is shown, autoFocus will not trigger.
     * To force it to trigger, we change this boolean when a response is sent back to the opener, which unmounts
     * the element from the dom. The next time the dialog is used, we will render the element again, and autoFocus
     * will trigger. */
    const [renderInput, setRenderInput] = useState(false);
    const [inputPlaceholder, setInputPlaceholder] = useState("New workspace");
    const [title, setTitle] = useState((_a = props.title) !== null && _a !== void 0 ? _a : "Single Input Dialog");
    const [inputValue, setInputValue] = useState(null);
    const [cancelResponseLabel, setCancelResponseLabel] = useState("Cancel");
    const [showCancelButton, setShowCancelButton] = useState(true);
    const [inputPattern, setInputPattern] = useState(undefined);
    const [inputMaxLength, setInputMaxLength] = useState(undefined);
    /**
     * Sends user input to the opener.
     */
    const sendResponse = (choice, targetValue) => {
        const resposeValue = targetValue ? targetValue : null;
        FEAGlobals.FSBL.Clients.DialogManager.respondToOpener({
            value: inputValue || resposeValue,
            choice,
        });
        setInputValue(null);
        setRenderInput(false);
        setNewRequest(false);
        Array.from(document.querySelectorAll("input")).forEach((el) => (el.value = ""));
    };
    /**
     * Handles escape and enter.
     */
    const handleKeydownOnBody = (e) => {
        if (e.code === "Enter" && e.shiftKey === false) {
            let target = e === null || e === void 0 ? void 0 : e.target;
            sendResponse("affirmative", target === null || target === void 0 ? void 0 : target.value);
        }
        if (e.code === "Escape") {
            sendResponse("cancel");
        }
    };
    /**
     * When the opener requests that the dialog show itself, it also passes in initialization data. This function
     * grabs that data, calls setState, and then fits the window to the contents of the DOM. Then we call `showDialog`,
     * which will display the dialog on the proper monitor.
     */
    const onShowRequested = (err, { data }) => {
        var _a;
        setTitle(data.title || "Title");
        setInputValue(null);
        setAffirmativeResponseLabel(data.affirmativeResponseLabel || "OK");
        setCancelResponseLabel(data.cancelResponseLabel || "Cancel");
        setShowCancelButton((_a = data.showCancelButton) !== null && _a !== void 0 ? _a : false);
        setRenderInput(true);
        setInputPattern(data.inputPattern);
        setInputMaxLength(data.inputMaxLength);
        setInputPlaceholder(data.inputPlaceholder || inputPlaceholder);
        setNewRequest(true);
    };
    /**
     * Fits the contents of the DOM to the window, then calls `showDialog`, which positions the
     * dialog on the proper monitor and toggles the visibility of the window.
     */
    const fitAndShow = () => {
        FEAGlobals.FSBL.Clients.WindowClient.fitToDOM(null, () => {
            FEAGlobals.FSBL.Clients.DialogManager.showDialog();
        });
    };
    useEffect(() => {
        document.body.addEventListener("keydown", handleKeydownOnBody);
        return () => {
            document.body.removeEventListener("keydown", handleKeydownOnBody);
        };
    }, []);
    useEffect(fitAndShow, [newRequest]);
    return (React.createElement(FinsembleDialog, { userInputTimeout: 10000, behaviorOnResponse: "hide", onShowRequested: onShowRequested, isModal: true },
        React.createElement(Title, { title: (_b = props.title) !== null && _b !== void 0 ? _b : title }),
        React.createElement("div", { className: "dialog-title" }, title),
        renderInput && (React.createElement(FinsembleDialogTextInput, { onInputChange: (e) => {
                setInputValue(e.target.value);
            }, placeholder: inputPlaceholder, autoFocus: true, inputPattern: inputPattern, maxLength: inputMaxLength, ariaLabel: title })),
        React.createElement("div", { className: "button-wrapper" },
            showCancelButton && (React.createElement(FinsembleDialogButton, { className: "fsbl-button-neutral", show: true, onClick: () => {
                    sendResponse("cancel");
                } }, cancelResponseLabel)),
            React.createElement(FinsembleDialogButton, { className: "fsbl-button-affirmative", show: true, onClick: () => {
                    sendResponse("affirmative");
                } }, affirmativeResponseLabel))));
};
/**
 * A window for collecting input from a user (e.g., a new workspace's name).
 */
export const SingleInputDialog = () => React.createElement(_SingleInputDialog, null);
//# sourceMappingURL=SingleInputDialog.js.map