import React from "react";
import AppTagsList from "./AppTagsList";
import { FavoriteMaker } from "../../../../favorites/FavoriteMaker";
import { FEAGlobals } from "../../../../../../common/Globals";
import { ADVANCED_APP_LAUNCHER, FAVORITES } from "../constants";
import { onClickA11y } from "../../../../utils";
import { useFavorites } from "../../../../../hooks/useFavorites";
/**
 * Creates a "delete" button for the component.
 *
 * @param {function deleteApp} props.deleteApp The function to call when deleting the app. Should be passed down from the parent component so that the app can be deleted from state and preferences.
 * @param {object} props.app The app for which this delete button is being rendered. We need this to know which app to delete when the button is clicked.
 * @returns
 */
const AALDeleteButton = ({ deleteApp, app }) => {
    // Get the "removeFavorite" function from the useFavorites hook so that we can remove the app from favorites when we delete it.
    const { removeFavorite } = useFavorites();
    // Render the button
    return (React.createElement("button", { onClick: (e) => {
            e.stopPropagation();
            // Use the same favorite id format as FavoriteMaker (app.title || app.name).
            const favoriteId = app.title || app.name;
            try {
                // Delete the app. This may be synchronous or return a Promise.
                const deleteResult = deleteApp(app.name);
                // If deleteApp returns a thenable, only remove the favorite on successful resolution.
                if (deleteResult && typeof deleteResult.then === "function") {
                    deleteResult
                        .then(() => {
                        removeFavorite(favoriteId);
                    })
                        .catch(() => {
                        // Swallow deletion errors here; favorite is left intact if deletion fails.
                    });
                }
                else {
                    // Synchronous deletion succeeded; now remove the favorite.
                    removeFavorite(favoriteId);
                }
            }
            catch (_a) {
                // If deleteApp throws synchronously, do not remove the favorite.
            }
        }, title: "Delete app", "aria-label": "Delete app" },
        React.createElement("i", { className: "ff-adp-trash" })));
};
/**
 * Used to make sure that a user is not waiting for component
 * to spawn after a double click, helps us prevent multiple
 * spawns for the same app.
 */
export default class AppDefinition extends React.Component {
    constructor(props) {
        super(props);
        this.onDragToFolder = this.onDragToFolder.bind(this);
        this.onItemClick = this.onItemClick.bind(this);
    }
    /**
     * Native HTML5 drag and drop
     **/
    onDragToFolder(event) {
        event.dataTransfer.setData("app", JSON.stringify(this.props.app));
    }
    /**
     * Spawns a component on click
     * @param {object} e The Synthetic React event
     *
     */
    async onItemClick() {
        const name = this.props.app.title || this.props.app.name;
        FEAGlobals.FSBL.Clients.LauncherClient.spawn(name.trim(), {
            addToWorkspace: true,
        });
        this.props.clearSearchText();
    }
    render() {
        var _a;
        const { app, folder, addTag, removeApp, deleteApp } = this.props;
        const appId = app.title || app.name;
        const displayName = app.displayName || app.name;
        const tags = (app === null || app === void 0 ? void 0 : app.tags) || [];
        return (React.createElement("div", { role: "listitem", ...onClickA11y(this.onItemClick), className: "app-item link", draggable: "true", onDragStart: this.onDragToFolder },
            React.createElement("div", { className: "left-side" },
                React.createElement("span", { className: "app-item-title" },
                    React.createElement(FavoriteMaker, { id: appId, category: "Application", name: displayName, icon: app.icon }),
                    React.createElement("span", { className: "app-name", title: displayName }, displayName)),
                tags.length > 0 && React.createElement(AppTagsList, { tags: tags, addTag: addTag })),
            React.createElement("div", { role: "toolbar", className: "right-side", style: { display: "flex" } },
                ![ADVANCED_APP_LAUNCHER, FAVORITES].includes((_a = folder.name) !== null && _a !== void 0 ? _a : "") && (React.createElement("button", { onClick: (e) => {
                        var _a;
                        e.stopPropagation();
                        removeApp((_a = folder.name) !== null && _a !== void 0 ? _a : "", app.name);
                    }, title: "Remove from folder", "aria-label": "Remove from folder" },
                    React.createElement("i", { className: "ff-close" }))),
                !app.source && app.canDelete && (React.createElement(AALDeleteButton, { deleteApp: deleteApp, app: app })))));
    }
}
//# sourceMappingURL=AppDefinition.js.map