import * as React from "react";
import { useFavoritesShell } from "../../hooks/useFavoritesShell";
import "../../assets/css/favorites.css";
import { Icon } from "../icon/Icon";
import { FinsembleDnDContext, AllowableDnDAxis } from "../legacyControls/FinsembleDnDContext";
import { FinsembleDraggable } from "../legacyControls/FinsembleDraggable";
/*
 *  The component that loads and renders all the favorited items.
 */
const FavoritesComponent = () => {
    const { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();
    // When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.
    // This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.
    const reorder = ({ oldIndex, newIndex }) => {
        setFavoritesOrder({ oldIndex, newIndex });
    };
    // Delete a favorite item from the toolbar
    const triggerRemoveFavorite = (event, id) => {
        event.stopPropagation();
        removeFavorite(id);
    };
    const nameLengthCheckPoint = (name) => (name.length > 24 ? `${name.substring(0, 25)}...` : name);
    const favoriteElements = favorites.map(({ id, name, icon, category }, index) => (React.createElement(FinsembleDraggable, { draggableId: id, index: index, key: id, wrapperClass: "finsemble-toolbar-button", onClick: () => triggerFavorite(id, category), onKeydown: (e) => {
            if (e.key === "Delete") {
                triggerRemoveFavorite(e, id);
            }
        } },
        React.createElement(Icon, { category: category, ...icon }),
        React.createElement("div", { className: "finsemble-toolbar-button-label", title: name }, nameLengthCheckPoint(name)),
        React.createElement("i", { title: "Unfavorite", onClick: (event) => triggerRemoveFavorite(event, id), id: "toolbar-delete", className: "ff-close-3" }))));
    return (React.createElement(FinsembleDnDContext, { onDragEnd: reorder, className: "finsemble-toolbar-section rearrange-region", id: "favoritesContainer", allowHorizontalScroll: true, axis: AllowableDnDAxis.x }, favoriteElements));
};
/**
 * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user
 * to launch, reorder, or delete a favorited item.
 */
export const FavoritesShell = () => (
// When user scrolls to one end of the favorite list, the corresponding variable will be set to "false" so that the scrolling indicator will grey out
React.createElement("div", { className: "finsemble-toolbar-section", id: "fav-shell" },
    React.createElement(FavoritesComponent, null)));
//# sourceMappingURL=FavoritesShell.js.map