import React, { useEffect } from "react";
import { Title } from "../../hooks/useTitle";
import { FinsembleDialog } from "../legacyControls/FinsembleDialog";
import { FinsembleDialogTextInput } from "../legacyControls/FinsembleDialogTextInput";
import { FinsembleDialogButton } from "../legacyControls/FinsembleDialogButton";
import { isValidURL } from "../shared/validateURL";
import { addProtocolToValidURL } from "../shared/addProtocolToValidURL";
import { FEAGlobals } from "../../../common/Globals";
import "../../assets/css/dialogs.css";
import "./quickComponent.css";
// @deprecated - Quick Components will be removed in a future version
class QuickComponentFormBase extends React.Component {
    constructor(props) {
        super(props);
        FEAGlobals.FSBL.Clients.Logger.system.deprecated("Quick Components have been deprecated and will not be available in a future release.");
        this.state = {
            name: "",
            url: "",
        };
        this.save = this.save.bind(this);
        this.cancel = this.cancel.bind(this);
        this.setName = this.setName.bind(this);
        this.setURL = this.setURL.bind(this);
        this.onkeydown = this.onkeydown.bind(this);
    }
    /**
     * Adds eventListeners on keydown, sets the height of the component.
     */
    componentDidMount() {
        FEAGlobals.FSBL.Clients.WindowClient.fitToDOM();
        document.body.addEventListener("keydown", this.onkeydown);
        FEAGlobals.FSBL.Clients.WindowClient.setAlwaysOnTop(true);
    }
    componentWillUnmount() {
        document.body.removeEventListener("keydown", this.onkeydown);
    }
    /**
     * Matches the enter and escape keys with the corresponding function to invoke.
     */
    onkeydown(e) {
        if (e.code === "Enter" && e.shiftKey === false) {
            this.save();
        }
        if (e.code === "Escape") {
            this.cancel();
        }
    }
    /**
     * Hides the window when the save button is clicked.
     */
    hideWindow() {
        FEAGlobals.finsembleWindow.hide();
    }
    /**
     * Persists the quick component to storage.
     */
    save() {
        if (!this.state)
            return FEAGlobals.FSBL.Clients.DialogManager.respondToOpener({});
        let { name, url } = this.state;
        if (!name || !url)
            return FEAGlobals.FSBL.Clients.DialogManager.respondToOpener({});
        if (!isValidURL(url)) {
            return FEAGlobals.FSBL.Clients.DialogManager.respondToOpener({
                error: "Invalid URL",
            });
        }
        const urlWithProtocol = addProtocolToValidURL(url);
        FEAGlobals.FSBL.Clients.LauncherClient.addUserDefinedComponent({
            name: name,
            url: urlWithProtocol,
        }, (err) => {
            if (err) {
                console.error(err);
            }
            // FEAGlobals.FSBL.Clients.WindowClient.close(false);
            FEAGlobals.FSBL.Clients.DialogManager.respondToOpener({});
        });
        Array.from(document.querySelectorAll("input")).forEach((el) => (el.value = ""));
        this.setState({
            name: "",
            url: "",
        });
    }
    /**
     * Kills the window.
     */
    cancel() {
        Array.from(document.querySelectorAll("input")).forEach((el) => (el.value = ""));
        FEAGlobals.FSBL.Clients.DialogManager.respondToOpener({});
    }
    setName(e) {
        this.setState({ name: e.target.value });
    }
    setURL(e) {
        this.setState({ url: e.target.value });
    }
    render() {
        var _a;
        return (React.createElement(FinsembleDialog, { behaviorOnResponse: "hide", onShowRequested: () => {
                FEAGlobals.FSBL.Clients.WindowClient.fitToDOM(null, () => {
                    FEAGlobals.FSBL.Clients.DialogManager.showDialog();
                });
            }, isModal: true },
            React.createElement(Title, { title: (_a = this.props.title) !== null && _a !== void 0 ? _a : "Quick Component" }),
            React.createElement("div", { className: "dialog-title" }, "Enter a name and URL for your app."),
            React.createElement(FinsembleDialogTextInput, { onInputChange: this.setName, placeholder: "Name", autoFocus: true, value: this.state.name, focusOnShow: true }),
            React.createElement(FinsembleDialogTextInput, { onInputChange: this.setURL, placeholder: "URL", value: this.state.url, autoFocus: false }),
            React.createElement("div", { className: "button-wrapper" },
                React.createElement(FinsembleDialogButton, { className: "fsbl-button-neutral", onClick: this.cancel, show: true }, "Cancel"),
                React.createElement(FinsembleDialogButton, { className: "fsbl-button-affirmative", onClick: this.save, show: true }, "Confirm"))));
    }
}
/**
 * A form that allows the user to add a quick component. It provides one field for the name of the quick component, and another field for its URL.
 */
export const QuickComponentForm = () => {
    // Add styles to the quick component window's body. This makes quick components styled like dialogs.
    useEffect(() => {
        document.body.classList.add("dialog");
    }, []);
    return React.createElement(QuickComponentFormBase, null);
};
//# sourceMappingURL=QuickComponentForm.js.map