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;
};
// ============================================================================
// Chatbot Header - Chatbot Conversation History Nav
// ============================================================================
import React from 'react';
// Import PatternFly components
import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, Menu, MenuList, MenuGroup, MenuItem, MenuContent } from '@patternfly/react-core';
import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
import LoadingState from './LoadingState';
import HistoryEmptyState from './EmptyState';
export 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, emptyState, noResultsState, isCompact } = _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", "emptyState", "noResultsState", "isCompact"]);
    const drawerRef = React.useRef(null);
    const onExpand = () => {
        drawerRef.current && drawerRef.current.focus();
    };
    const getNavItem = (conversation) => {
        var _a;
        return (React.createElement(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.createElement(OutlinedCommentAltIcon, null) }), (conversation.menuItems
            ? {
                actions: (React.createElement(ConversationHistoryDropdown, { 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.createElement(MenuList, null, conversations.map((conversation) => (React.createElement(React.Fragment, { key: conversation.id }, getNavItem(conversation))))));
        }
        else {
            // Render for object with NavItemObject arrays as values
            return (React.createElement(React.Fragment, null, Object.keys(conversations).map((navGroup) => (React.createElement(MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, key: navGroup },
                React.createElement(MenuList, null, conversations[navGroup].map((conversation) => (React.createElement(React.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.createElement(HistoryEmptyState, Object.assign({}, errorState));
        }
        if (emptyState) {
            return React.createElement(HistoryEmptyState, Object.assign({}, emptyState));
        }
        if (noResultsState) {
            return React.createElement(HistoryEmptyState, Object.assign({}, noResultsState));
        }
        return (React.createElement(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
            React.createElement(MenuContent, null, buildMenu())));
    };
    const renderDrawerContent = () => (React.createElement(React.Fragment, null,
        handleTextInputChange && (React.createElement("div", { className: "pf-chatbot__input" },
            React.createElement(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
        React.createElement(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), renderMenuContent())));
    const renderPanelContent = () => {
        const drawer = (React.createElement(React.Fragment, null,
            React.createElement(DrawerHead, Object.assign({}, drawerHeadProps),
                React.createElement(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
                    React.createElement(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
                    onNewChat && (React.createElement(Button, { size: isCompact ? 'sm' : undefined, onClick: onNewChat }, newChatButtonText)))),
            isLoading ? React.createElement(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()));
        return (React.createElement(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.createElement(Drawer, Object.assign({ className: `pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`, isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded }, props),
        React.createElement(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
            React.createElement(DrawerContentBody, Object.assign({}, drawerContentBodyProps),
                React.createElement(React.Fragment, null,
                    React.createElement("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
                    drawerContent)))));
};
export default ChatbotConversationHistoryNav;
