import React, { useRef, useState } from "react";
import AppDefinition from "./AppDefinition";
import NoAppsFound from "./NoAppsFound";
import sortFunctions from "../utils/sort-functions";
import { ADVANCED_APP_LAUNCHER, FAVORITES } from "../constants";
import { useFavorites } from "../../../../../hooks/useFavorites";
import SearchBox from "./SearchBox";
import TagsList from "./TagsList";
import SortBy from "./SortBy";
const sortAppsByName = (leftApp, rightApp) => {
    var _a, _b;
    const left = ((_a = leftApp.displayName) !== null && _a !== void 0 ? _a : leftApp.name).toLowerCase();
    const right = ((_b = rightApp.displayName) !== null && _b !== void 0 ? _b : rightApp.name).toLowerCase();
    if (left < right) {
        return -1;
    }
    if (right < left) {
        return 1;
    }
    return 0;
};
const determineApps = (folder, allApps, favoritedIds) => {
    if (folder.name === ADVANCED_APP_LAUNCHER) {
        return allApps;
    }
    if (folder.name === FAVORITES) {
        return allApps.filter((app) => favoritedIds.includes(app.appID));
    }
    return folder.apps;
};
const AppList = ({ activeTags, addTag, allApps, clearSearchText, deleteApp, filterText, folder, removeApp, sortBy, zeroStateMessage, }) => {
    const { favorites } = useFavorites();
    if (!folder) {
        return;
    }
    const folderApps = determineApps(folder, allApps, favorites.map(({ id }) => id));
    if (!folderApps) {
        return;
    }
    const appsFilteredBySearch = folderApps.filter(({ displayName, name }) => {
        var _a;
        return (_a = displayName === null || displayName === void 0 ? void 0 : displayName.toLowerCase().includes(filterText.toLowerCase())) !== null && _a !== void 0 ? _a : name === null || name === void 0 ? void 0 : name.toLowerCase().includes(filterText.toLowerCase());
    });
    const appsFilteredByTags = !activeTags
        ? appsFilteredBySearch
        : appsFilteredBySearch.filter((app) => activeTags.every((tag) => { var _a; return (_a = app.tags) === null || _a === void 0 ? void 0 : _a.includes(tag); }));
    const sortedApps = sortFunctions[sortBy](appsFilteredByTags, favorites.map(({ name }) => name));
    if (sortedApps.length === 0) {
        return zeroStateMessage;
    }
    return (React.createElement(React.Fragment, null, sortedApps.map((app, index) => (React.createElement(AppDefinition, { key: index, app: app, folder: folder, allApps: allApps, deleteApp: deleteApp, removeApp: removeApp, clearSearchText: clearSearchText, addTag: addTag })))));
};
const Content = ({ folder, activeTags = [], deleteTag, sortBy, setSortBy, addTag, deleteApp, removeApp, allApps, addAppToFolder, removeAppFromFolder, }) => {
    var _a, _b;
    const dialogRef = useRef(null);
    const [filterText, setFilterText] = useState("");
    const getNoResultsMessage = () => {
        const messages = {
            search: ["No results found. Please try again."],
            Favorites: ["There’s nothing here!", React.createElement("br", { key: 1 }), "Add apps to Favorites to view them here."],
            //Dashboards: ['There’s nothing here!', <br />, 'Press “New Dashboard” to construct an Dashboard.'],
            default: ["There’s nothing here!", React.createElement("br", { key: 2 }), "Add apps to folders to view them here."],
        };
        if (!folder) {
            return ["Loading data...", React.createElement("br", { key: 3 })];
        }
        // User is searching so we need the search message
        if (filterText || activeTags.length) {
            return messages.search;
        }
        // Now let's check which folder is currently active
        switch (folder.name) {
            case "Favorites":
                return messages.Favorites;
                break;
            case "Dashboards":
                return [""];
            // return messages.Dashboards;
            default:
                return messages.default;
        }
    };
    const appIdsInFolder = (_b = (_a = folder.apps) === null || _a === void 0 ? void 0 : _a.map(({ appID }) => appID)) !== null && _b !== void 0 ? _b : [];
    return (React.createElement("div", { className: "complex-menu-content-row" },
        React.createElement("div", { className: "filter-sort" },
            React.createElement(SearchBox, { searchString: filterText, updateSearchString: setFilterText }),
            React.createElement(TagsList, { tags: activeTags, deleteTag: deleteTag }),
            React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
                React.createElement(SortBy, { sortBy: sortBy, setSortBy: setSortBy }),
                folder.name !== ADVANCED_APP_LAUNCHER && folder.name !== FAVORITES && (React.createElement("button", { className: "aal-add-app", onClick: () => { var _a; return (_a = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current) === null || _a === void 0 ? void 0 : _a.showModal(); }, title: "Add app to folder", "aria-label": "Add app to folder" },
                    React.createElement("i", { className: "ff-plus-circle" }))))),
        React.createElement("div", { className: "item-wrapper" },
            React.createElement(AppList, { activeTags: activeTags, addTag: addTag, allApps: allApps, deleteApp: deleteApp, folder: folder, removeApp: removeApp, sortBy: sortBy, filterText: filterText, clearSearchText: () => setFilterText(""), zeroStateMessage: React.createElement(NoAppsFound, { message: getNoResultsMessage() }) })),
        React.createElement("dialog", { ref: dialogRef, onKeyDown: (e) => {
                var _a;
                if (e.key === "Escape") {
                    e.stopPropagation();
                    (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.close();
                }
            } },
            React.createElement("button", { "aria-label": "Close", title: "Close", onClick: () => { var _a; return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.close(); } },
                React.createElement("i", { className: "ff-close" })),
            React.createElement("div", { className: "app-list" }, allApps
                .filter((app) => !appIdsInFolder.includes(app.appID))
                .sort(sortAppsByName)
                .map((app) => {
                var _a;
                return (React.createElement("button", { key: app.appID, onClick: () => {
                        var _a;
                        addAppToFolder((_a = folder.name) !== null && _a !== void 0 ? _a : "", app);
                    } }, (_a = app.displayName) !== null && _a !== void 0 ? _a : app.name));
            })))));
};
export default Content;
//# sourceMappingURL=Content.js.map