import { jsxs, jsx } from "react/jsx-runtime";
import { useState } from "react";
import { getAssetUrl } from "../../utils/assetBase.js";
import { Avatar } from "../Avatar/index.js";
import { Menu } from "../Menu/index.js";
/* empty css                   */
const NotificationIcon = getAssetUrl("icons/bell.svg");
const HelpIcon = getAssetUrl("icons/help-icon.svg");
const ImpactLogoHD2 = getAssetUrl("icons/IA_Logo.svg");
const MessageIconDisabled = getAssetUrl("icons/message-icon-disabled.svg");
const MessageIcon = getAssetUrl("icons/message-icon.svg");
const NotificationDNDIcon = getAssetUrl("icons/notification-dnd.svg");
function Header({
  title,
  userName,
  handleLogoClick,
  showNotificationIcon = true,
  notificationIndicator = true,
  handleNotificationClick,
  showHelpIcon = true,
  handleHelpClick,
  showMessageIcon = true,
  handleMessageClick,
  showChatBotIcon = true,
  handleChatBotClick,
  isMessageIconDisabled = false,
  isNotificationDnd = false,
  dropMenuOptions = [{ label: userName ?? "User", onClick: () => {
  } }],
  isChatBotDisabled = false,
  centerComponent,
  avatarProps,
  avatarType = "withoutPicture",
  className,
  "data-testid": dataTestId
}) {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  return /* @__PURE__ */ jsxs("div", { className: `impact-header-container ${className ?? ""}`.trim(), "data-testid": dataTestId, children: [
    /* @__PURE__ */ jsxs("div", { className: "impact-header-container-left-side", children: [
      /* @__PURE__ */ jsx(
        "div",
        {
          "aria-label": "Logo",
          className: "impact-header-logo",
          role: "button",
          tabIndex: 0,
          onClick: handleLogoClick,
          onKeyDown: (e) => e.key === "Enter" && (handleLogoClick == null ? void 0 : handleLogoClick()),
          children: /* @__PURE__ */ jsx("img", { alt: "Impact Logo", height: "100%", src: ImpactLogoHD2, width: "100%" })
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "impact-header-separator" }),
      /* @__PURE__ */ jsx("div", { className: "impact-header-title", children: title })
    ] }),
    centerComponent,
    /* @__PURE__ */ jsxs("div", { className: "impact-header-container-right-side", children: [
      showHelpIcon && /* @__PURE__ */ jsx(
        "div",
        {
          "aria-label": "Help",
          className: "impact-header-help-container",
          role: "button",
          tabIndex: 0,
          onClick: handleHelpClick,
          onKeyDown: (e) => e.key === "Enter" && (handleHelpClick == null ? void 0 : handleHelpClick()),
          children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: HelpIcon, width: "100%" })
        }
      ),
      isMessageIconDisabled && showMessageIcon && /* @__PURE__ */ jsx(
        "div",
        {
          "aria-label": "Message (disabled)",
          className: "impact-header-message-container",
          role: "button",
          tabIndex: 0,
          children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: MessageIconDisabled, width: "100%" })
        }
      ),
      !isMessageIconDisabled && showMessageIcon && /* @__PURE__ */ jsx(
        "div",
        {
          "aria-label": "Message",
          className: "impact-header-message-container",
          role: "button",
          tabIndex: 0,
          onClick: handleMessageClick,
          onKeyDown: (e) => e.key === "Enter" && (handleMessageClick == null ? void 0 : handleMessageClick()),
          children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: MessageIcon, width: "100%" })
        }
      ),
      isNotificationDnd && showNotificationIcon && /* @__PURE__ */ jsx(
        "div",
        {
          "aria-label": "Notifications",
          className: "impact-header-notification-container",
          role: "button",
          tabIndex: 0,
          onClick: handleNotificationClick,
          onKeyDown: (e) => e.key === "Enter" && (handleNotificationClick == null ? void 0 : handleNotificationClick()),
          children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: NotificationDNDIcon, width: "100%" })
        }
      ),
      !isNotificationDnd && showNotificationIcon && /* @__PURE__ */ jsxs(
        "div",
        {
          "aria-label": "Notifications",
          className: "impact-header-notification-container",
          role: "button",
          tabIndex: 0,
          onClick: handleNotificationClick,
          onKeyDown: (e) => e.key === "Enter" && (handleNotificationClick == null ? void 0 : handleNotificationClick()),
          children: [
            /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: NotificationIcon, width: "100%" }),
            notificationIndicator && /* @__PURE__ */ jsxs("div", { className: "impact-header-notification-indicator-container", children: [
              /* @__PURE__ */ jsx("div", { className: "impact-header-notification-indicator-outer-circle" }),
              /* @__PURE__ */ jsx("div", { className: "impact-header-notification-indicator-inner-circle" })
            ] })
          ]
        }
      ),
      showChatBotIcon && /* @__PURE__ */ jsx(
        "div",
        {
          "aria-disabled": isChatBotDisabled,
          "aria-label": "Ask Alan",
          className: `impact-header-bot-container ${isChatBotDisabled ? "impact-header-bot-container-disabled" : ""}`,
          role: "button",
          tabIndex: 0,
          onClick: handleChatBotClick,
          onKeyDown: (e) => e.key === "Enter" && !isChatBotDisabled && (handleChatBotClick == null ? void 0 : handleChatBotClick()),
          children: /* @__PURE__ */ jsx("span", { className: "impact-header-bot-container-text", children: "Ask Alan" })
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          "aria-expanded": open,
          "aria-haspopup": "menu",
          "aria-label": "User menu",
          className: "impact-header-avatar",
          role: "button",
          tabIndex: 0,
          onClick: (event) => {
            setAnchorEl(event.currentTarget);
          },
          onKeyDown: (e) => {
            e.key === "Enter" && setAnchorEl(e.currentTarget);
          },
          children: /* @__PURE__ */ jsx(Avatar, { label: userName, size: "small", type: avatarType, ...avatarProps })
        }
      ),
      dropMenuOptions && dropMenuOptions.length > 0 && /* @__PURE__ */ jsx(
        Menu,
        {
          anchorEl,
          open,
          options: dropMenuOptions,
          onClose: () => {
            setAnchorEl(null);
          }
        }
      )
    ] })
  ] });
}
Header.displayName = "Header";
export {
  Header
};
