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;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, Fragment } from 'react';
// Import PatternFly components
import { Button, Divider, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, InputGroup, InputGroupItem, SearchInput, Title, Icon, MenuList, MenuGroup, MenuItem, Menu, MenuContent } from '@patternfly/react-core';
import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } 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, menuListProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, hasDrawerHeadDivider, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = _jsx(OutlinedClockIcon, {}), searchInputScreenReaderText, searchActionStart, searchActionEnd, searchToolbar, menuProps, menuGroupProps, menuContentProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "menuListProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "hasDrawerHeadDivider", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "searchActionStart", "searchActionEnd", "searchToolbar", "menuProps", "menuGroupProps", "menuContentProps"]);
    const drawerRef = useRef(null);
    const onExpand = () => {
        drawerRef.current && drawerRef.current.focus();
    };
    const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
    const getNavItem = (conversation) => {
        var _a;
        return (_jsx(MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : _jsx(OutlinedCommentAltIcon, {}) }), (conversation.menuItems
            ? {
                actions: (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
            }
            : {}), conversation.additionalProps, { children: conversation.text })));
    };
    const buildConversations = () => {
        if (Array.isArray(conversations)) {
            return (_jsx(MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
                    if (isConversation(conversation)) {
                        return _jsx(Fragment, { children: getNavItem(conversation) }, conversation.id);
                    }
                    else {
                        return conversation;
                    }
                }) })));
        }
        else {
            return (_jsx(_Fragment, { children: Object.keys(conversations).map((navGroup) => (_jsx(MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: navGroup, labelHeadingLevel: "h3" }, menuGroupProps === null || menuGroupProps === void 0 ? void 0 : menuGroupProps[navGroup], { children: _jsx(MenuList, Object.assign({}, menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps[navGroup], { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) })) }), navGroup))) }));
        }
    };
    // 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 _jsx(HistoryEmptyState, Object.assign({}, errorState));
        }
        if (emptyState) {
            return _jsx(HistoryEmptyState, Object.assign({}, emptyState));
        }
        if (noResultsState) {
            return _jsx(HistoryEmptyState, Object.assign({}, noResultsState));
        }
        return (_jsx(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
    };
    const renderDrawerContent = () => (_jsx(_Fragment, { children: _jsx(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
    const searchInputContainer = handleTextInputChange && (_jsxs("div", { className: "pf-chatbot__input", children: [_jsx(SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)), searchInputScreenReaderText && (_jsx("div", { className: "pf-chatbot__filter-announcement pf-chatbot-m-hidden", children: searchInputScreenReaderText }))] }));
    const renderSearchAndActions = () => {
        if (searchToolbar) {
            return searchToolbar;
        }
        return searchActionStart || searchActionEnd ? (_jsx("div", { className: "pf-chatbot__history-search-actions", children: _jsxs(InputGroup, { children: [searchActionStart && _jsx(InputGroupItem, { children: searchActionStart }), searchInputContainer && _jsx(InputGroupItem, { isFill: true, children: searchInputContainer }), searchActionEnd && _jsx(InputGroupItem, { children: searchActionEnd })] }) })) : (searchInputContainer);
    };
    const renderPanelContent = () => {
        const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: _jsx(PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && _jsx(Divider, { className: "pf-chatbot__heading-divider" }), _jsxs("div", { className: "pf-chatbot__heading-container", children: [_jsxs("div", { className: "pf-chatbot__title-container", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), _jsx(Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && renderSearchAndActions()] }), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
        return (_jsx(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: 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 (_jsx(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, { children: _jsx(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps, { children: _jsx(DrawerContentBody, Object.assign({}, drawerContentBodyProps, { children: _jsxs(_Fragment, { children: [_jsx("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;
