import React, { useState, useRef, useContext } from "react";
import debounce from "lodash/debounce";
// Hooks
import { useNotificationUI } from "../../../../../hooks/useNotifications";
// Components
import IconButton from "../../shared/IconButton";
import { NotificationsContext } from "../../../notificationsContext";
import { FEAGlobals } from "../../../../../../common";
const NotificationsCenterMenu = ({ isDocked, toggleDockedStatus }) => {
    const goToSettings = () => {
        FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
            preferencesTab: "Notifications",
        });
        FEAGlobals.FSBL.Clients.LauncherClient.showWindow({
            componentType: "UserPreferences",
        }, {
            monitor: "mine",
            left: "center",
            top: "center",
        });
    };
    return (React.createElement("div", { className: "context-menu__container" },
        React.createElement("div", { className: "context-menu__action fsbl-nc_undock", onClick: toggleDockedStatus },
            React.createElement("div", { className: "finsemble-icon" },
                React.createElement("i", { className: `ff-${isDocked ? "chat-popout" : "share"}` })),
            React.createElement("span", { className: "btn-label" }, isDocked ? "Undock" : "Dock")),
        React.createElement("div", { className: "context-menu__action fsbl-nc_open-settings", onClick: goToSettings },
            React.createElement("div", { className: "finsemble-icon" },
                React.createElement("i", { className: "ff-settings" })),
            React.createElement("span", { className: "btn-label" }, "Settings"))));
};
const DrawerHeader = ({ isDocked, toggleDockedStatus }) => {
    const [uiState, setUIState] = useNotificationUI();
    const notificationsContext = useContext(NotificationsContext);
    const { searchString, setSearchString } = notificationsContext;
    const [searchInputValue, setSearchInputValue] = useState(searchString);
    const [showMenu, setShowMenu] = useState(false);
    const closeDrawerClick = () => {
        setUIState({
            ...uiState,
            showCenter: false,
        });
    };
    const toggleMenu = () => {
        setShowMenu(!showMenu);
    };
    // This is unchanged across renders
    const handleSearchTerm = useRef(debounce((nextValue) => {
        const regex = /^(title|details|source):/gi;
        nextValue = nextValue.trim();
        const isFilter = regex.test(nextValue);
        let parsedSearchTerm = "";
        if (isFilter) {
            parsedSearchTerm = nextValue.split(":")[1].trim();
        }
        else {
            parsedSearchTerm = nextValue;
        }
        if (parsedSearchTerm.length > 2) {
            setSearchString(nextValue);
        }
        else {
            console.log("search string is too short");
            setSearchString("");
        }
    }, 400)).current;
    const handleChange = (ev) => {
        const { value: nextValue } = ev.target;
        setSearchInputValue(nextValue);
        // Even though handleChange is created on each render and executed
        // it references the same handleSearchTerm that was created initially
        handleSearchTerm(nextValue);
    };
    return (React.createElement("div", { id: "notifications-center__header" },
        React.createElement(IconButton, { iconName: "ff-search", classNames: "no-hover" }),
        React.createElement("input", { className: "search-notifications__input", type: "text", placeholder: "Search Notifications", value: searchInputValue, onChange: handleChange }),
        React.createElement(IconButton, { iconName: "ff-dots-vert", tooltip: "Options", classNames: "center-menu", clickHandler: toggleMenu }, showMenu ? React.createElement(NotificationsCenterMenu, { isDocked: isDocked, toggleDockedStatus: toggleDockedStatus }) : null),
        React.createElement(IconButton, { classNames: "fsbl-nc_hide-center", iconName: "ff-adp-chevron-right", clickHandler: closeDrawerClick })));
};
export default DrawerHeader;
//# sourceMappingURL=DrawerHeader.js.map