"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChatbotConversationHistoryNav = void 0;
// ============================================================================
// Chatbot Header - Chatbot Conversation History Nav
// ============================================================================
const react_1 = __importDefault(require("react"));
// Import PatternFly components
const react_core_1 = require("@patternfly/react-core");
const react_icons_1 = require("@patternfly/react-icons");
const Chatbot_1 = require("../Chatbot/Chatbot");
const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
const LoadingState_1 = __importDefault(require("./LoadingState"));
const EmptyState_1 = __importDefault(require("./EmptyState"));
const ChatbotConversationHistoryNav = (_a) => {
    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState"]);
    const drawerRef = react_1.default.useRef(null);
    const onExpand = () => {
        drawerRef.current && drawerRef.current.focus();
    };
    const getNavItem = (conversation) => {
        var _a;
        return (react_1.default.createElement(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, key: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : react_1.default.createElement(react_icons_1.OutlinedCommentAltIcon, null) }), (conversation.menuItems
            ? {
                actions: (react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
            }
            : {}), conversation.additionalProps), conversation.text));
    };
    const buildMenu = () => {
        if (Array.isArray(conversations)) {
            // Render for array of MenuItemObject
            return (react_1.default.createElement(react_core_1.MenuList, null, conversations.map((conversation) => (react_1.default.createElement(react_1.default.Fragment, { key: conversation.id }, getNavItem(conversation))))));
        }
        else {
            // Render for object with NavItemObject arrays as values
            return (react_1.default.createElement(react_1.default.Fragment, null, Object.keys(conversations).map((navGroup) => (react_1.default.createElement(react_core_1.MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, key: navGroup },
                react_1.default.createElement(react_core_1.MenuList, null, conversations[navGroup].map((conversation) => (react_1.default.createElement(react_1.default.Fragment, { key: conversation.id }, getNavItem(conversation))))))))));
        }
    };
    // Menu Content
    // - Consumers should pass an array to <Chatbot> of the list of conversations
    // - Groups could be optional, but items need to be ordered by date
    const renderMenuContent = () => {
        if (errorState) {
            return react_1.default.createElement(EmptyState_1.default, Object.assign({}, errorState));
        }
        return (react_1.default.createElement(react_core_1.Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
            react_1.default.createElement(react_core_1.MenuContent, null, buildMenu())));
    };
    const renderDrawerContent = () => (react_1.default.createElement(react_1.default.Fragment, null,
        handleTextInputChange && (react_1.default.createElement("div", { className: "pf-chatbot__input" },
            react_1.default.createElement(react_core_1.SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
        react_1.default.createElement(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), renderMenuContent())));
    const renderPanelContent = () => {
        const drawer = (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps),
                react_1.default.createElement(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
                    react_1.default.createElement(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
                    onNewChat && react_1.default.createElement(react_core_1.Button, { onClick: onNewChat }, newChatButtonText))),
            isLoading ? react_1.default.createElement(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()));
        return (react_1.default.createElement(react_core_1.DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps), drawer));
    };
    // An onKeyDown property must be passed to the Drawer component to handle closing
    // the drawer panel and deactivating the focus trap via the Escape key.
    const onEscape = (event) => {
        if (event.key === 'Escape') {
            // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
            if (event.target instanceof HTMLInputElement && event.target.type !== 'button') {
                setIsDrawerOpen(false);
            }
        }
    };
    return (react_1.default.createElement(react_core_1.Drawer, Object.assign({ className: "pf-chatbot__history", isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === Chatbot_1.ChatbotDisplayMode.fullscreen || displayMode === Chatbot_1.ChatbotDisplayMode.embedded }, props),
        react_1.default.createElement(react_core_1.DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
            react_1.default.createElement(react_core_1.DrawerContentBody, Object.assign({}, drawerContentBodyProps),
                react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("div", { className: `${isDrawerOpen && (displayMode === Chatbot_1.ChatbotDisplayMode.default || displayMode === Chatbot_1.ChatbotDisplayMode.docked || displayMode === Chatbot_1.ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
                    drawerContent)))));
};
exports.ChatbotConversationHistoryNav = ChatbotConversationHistoryNav;
exports.default = exports.ChatbotConversationHistoryNav;
