/*!
 * 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 { FinsembleDialogQuestion } from "../legacyControls/FinsembleDialogQuestion";
import { FinsembleDialogButton } from "../legacyControls/FinsembleDialogButton";
import { FEAGlobals } from "../../../common/Globals";
import "./YesNoDialog.css";
import "../../assets/css/dialogs.css";
import Timer from "./timer";
const DEFAULT_TITLE = "Yes or No Dialog";
const DEFAULT_COMPONENT_STATE = {
    question: "No question.",
    negativeResponseLabel: "No",
    affirmativeResponseLabel: "Yes",
    cancelResponseLabel: "Cancel",
    showNegativeButton: true,
    showAffirmativeButton: true,
    showCancelButton: true,
};
/**
 * This is our standard dialog that presents the user with 1 - 3 choices. It can be used to allow
 * the user to confirm, reject, or cancel an action. All of these options can be included, and all
 * can be excluded.
 */
const YesNoDialogBase = (props) => {
    var _a;
    const [newRequest, setNewRequest] = useState(false);
    const [title, setTitle] = useState(DEFAULT_TITLE);
    const [question, setQuestion] = useState(DEFAULT_COMPONENT_STATE.question);
    const [negativeResponseLabel, setNegativeResponseLabel] = useState(DEFAULT_COMPONENT_STATE.negativeResponseLabel);
    const [affirmativeResponseLabel, setAffirmativeResponseLabel] = useState(DEFAULT_COMPONENT_STATE.affirmativeResponseLabel);
    const [cancelResponseLabel, setCancelResponseLabel] = useState(DEFAULT_COMPONENT_STATE.cancelResponseLabel);
    const [showNegativeButton, setShowNegativeButton] = useState(DEFAULT_COMPONENT_STATE.showNegativeButton);
    const [showAffirmativeButton, setShowAffirmativeButton] = useState(DEFAULT_COMPONENT_STATE.showAffirmativeButton);
    const [showCancelButton, setShowCancelButton] = useState(DEFAULT_COMPONENT_STATE.showCancelButton);
    const [showTimer, setShowTimer] = useState(false);
    const [timerDuration, setTimerDuration] = useState(null);
    /**
     * Sends user input to the opener.
     *
     * @param {ResponseOptions} choice
     */
    const sendResponse = (choice) => {
        FEAGlobals.FSBL.Clients.DialogManager.respondToOpener({
            choice,
        });
        // This will detach the timer component from the dom. Next time the component comes up,
        // it'll have a fresh timer.
        setShowTimer(false);
        setNewRequest(false);
    };
    /**
     * Handles escape and enter.
     *
     * @param {any} e
     */
    const handleKeydownOnBody = (e) => {
        if (e.code === "Enter" && e.shiftKey === false) {
            sendResponse("affirmative");
        }
        else 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.
     *
     * @param {any} err
     * @param {any} response
     */
    const onShowRequested = (err, { data }) => {
        var _a, _b, _c, _d, _e, _f, _g;
        setTitle((_a = data.title) !== null && _a !== void 0 ? _a : DEFAULT_TITLE);
        setQuestion((_b = data.question) !== null && _b !== void 0 ? _b : DEFAULT_COMPONENT_STATE.question);
        setNegativeResponseLabel(data.negativeResponseLabel || "No");
        setAffirmativeResponseLabel(data.affirmativeResponseLabel || "Yes");
        setCancelResponseLabel(data.cancelResponseLabel || "Cancel");
        setShowNegativeButton((_c = data.showNegativeButton) !== null && _c !== void 0 ? _c : true);
        setShowAffirmativeButton((_d = data.showAffirmativeButton) !== null && _d !== void 0 ? _d : true);
        setShowCancelButton((_e = data.showCancelButton) !== null && _e !== void 0 ? _e : true);
        setShowTimer((_f = data.showTimer) !== null && _f !== void 0 ? _f : false);
        setTimerDuration((_g = data.timerDuration) !== null && _g !== void 0 ? _g : null);
        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();
        });
    };
    /**
     * Sends an affirmative response to the opener.
     */
    const sendAffirmativeResponse = () => {
        sendResponse("affirmative");
    };
    /**
     * Sends a negative response to the opener.
     */
    const sendNegativeResponse = () => {
        sendResponse("negative");
    };
    /**
     * Sends a cancel response to the opener.
     */
    const sendCancelResponse = () => {
        sendResponse("cancel");
    };
    /**
     * Sends an expired response to the opener.
     */
    const sendExpiredResponse = () => {
        sendResponse("expired");
    };
    useEffect(() => {
        document.body.addEventListener("keydown", handleKeydownOnBody);
    }, []);
    useEffect(() => {
        fitAndShow();
    }, [
        title,
        question,
        negativeResponseLabel,
        cancelResponseLabel,
        affirmativeResponseLabel,
        showNegativeButton,
        showAffirmativeButton,
        showCancelButton,
        newRequest,
    ]);
    return (React.createElement(FinsembleDialog, { userInputTimeout: 10000, behaviorOnResponse: "hide", onShowRequested: onShowRequested, isModal: true },
        React.createElement(Title, { title: (_a = props.title) !== null && _a !== void 0 ? _a : title }),
        React.createElement("div", { className: "dialog-title" }, title),
        React.createElement(FinsembleDialogQuestion, null,
            question,
            showTimer && typeof timerDuration === "number" && (React.createElement(Timer, { ontimerDurationExpiration: sendExpiredResponse, timerDuration: timerDuration }))),
        React.createElement("div", { className: "button-wrapper" },
            React.createElement(FinsembleDialogButton, { show: showNegativeButton, className: "fsbl-button-neutral", onClick: sendNegativeResponse }, negativeResponseLabel),
            React.createElement(FinsembleDialogButton, { show: showCancelButton, className: "fsbl-button-neutral", onClick: sendCancelResponse }, cancelResponseLabel),
            React.createElement(FinsembleDialogButton, { show: showAffirmativeButton, className: "fsbl-button-affirmative", onClick: sendAffirmativeResponse }, affirmativeResponseLabel))));
};
/**
 * This dialog window provides a binary choice to the user, and reports back the response to the opener.
 */
export const YesNoDialog = () => React.createElement(YesNoDialogBase, null);
//# sourceMappingURL=YesNoDialog.js.map