import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import default_1$3 from "../../node_modules/@mui/icons-material/Clear.js";
import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowDown.js";
import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowUp.js";
import default_1$2 from "../../node_modules/@mui/icons-material/SaveOutlined.js";
import { getAssetUrl } from "../../utils/assetBase.js";
import { Button } from "../Button/index.js";
import { Loader } from "../Loader/index.js";
const ActiveIcon = getAssetUrl("icons/activeModuleIcon.svg");
const HomeIcon = getAssetUrl("icons/chat-home-icon.svg");
const CloseThreadIcon = getAssetUrl("icons/close.svg");
const SmartBotIcon = getAssetUrl("icons/smartBotAlan.svg");
function ChatbotModuleMenu({
  hideMenuArrow,
  onModuleClick,
  moduleList,
  activeList,
  hideChildren = false,
  isModuleListLoading,
  hideSmartBotIcon = false,
  hideCenterOptions = false,
  threadList: threadListProp = [],
  activeThread: activeThreadProp,
  handleSavedChat,
  onClose,
  isFullWidth
}) {
  var _a;
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [activeModule, setActiveModule] = useState(
    ((_a = moduleList.find((module) => module.isActive)) == null ? void 0 : _a.name) || ""
  );
  const [threadList, setThreadList] = useState(threadListProp);
  const [activeThread, setActiveThread] = useState(activeThreadProp || threadListProp[0]);
  const handleCloseThread = (e, idx) => {
    e.stopPropagation();
    e.preventDefault();
    const newThreadList = [...threadList];
    newThreadList.splice(idx, 1);
    setThreadList(newThreadList);
  };
  useEffect(() => {
    const handleClickOutside = (e) => {
      const target = e.target;
      if (!target.closest(".chatbot-component-header-dropdown-container")) {
        setIsDropdownOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  return /* @__PURE__ */ jsxs("div", { className: "conversation-screen-container-header", children: [
    /* @__PURE__ */ jsxs("div", { className: "left_logo_arrow_container", children: [
      !hideSmartBotIcon && /* @__PURE__ */ jsx("div", { className: "conversation_chatbot_logo_container", children: /* @__PURE__ */ jsx("img", { alt: "smartbot", src: SmartBotIcon }) }),
      !hideMenuArrow && /* @__PURE__ */ jsxs("div", { className: "menu_arrow", children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            icon: isDropdownOpen ? /* @__PURE__ */ jsx(default_1, {}) : /* @__PURE__ */ jsx(default_1$1, {}),
            iconPlacement: "right",
            size: hideChildren ? "small" : "medium",
            type: "default",
            variant: "text",
            onClick: () => {
              setIsDropdownOpen(!isDropdownOpen);
            },
            children: !hideChildren && "Module"
          }
        ),
        isDropdownOpen && /* @__PURE__ */ jsx(
          "div",
          {
            className: `chatbot-component-header-dropdown-container ${isDropdownOpen ? "open" : ""}`,
            style: {
              width: 397,
              position: "absolute",
              boxShadow: "0px 1px 6px 0px #1933451A",
              top: 52,
              zIndex: 999999,
              backgroundColor: "white",
              padding: "16px",
              borderRadius: "18px"
            },
            children: isModuleListLoading ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsx(
              "div",
              {
                className: "chatbot-component-header-dropdown-item",
                style: {
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  backgroundColor: "white",
                  gap: 16,
                  cursor: "pointer"
                },
                children: moduleList.map((module, idx) => /* @__PURE__ */ jsxs(
                  "div",
                  {
                    className: "chatbot-component-header-dropdown-item-container",
                    style: {
                      display: "flex",
                      height: 66,
                      alignItems: "center",
                      justifyContent: "space-between",
                      padding: "12px"
                    },
                    onClick: () => {
                      setActiveModule(module.name ?? "");
                      onModuleClick == null ? void 0 : onModuleClick(module.id, module.name, activeList);
                      setIsDropdownOpen(false);
                    },
                    children: [
                      /* @__PURE__ */ jsxs(
                        "div",
                        {
                          className: "chatbot-component-header-dropdown-item-content",
                          style: { display: "flex", alignItems: "center", gap: 10 },
                          children: [
                            typeof module.icon === "string" ? /* @__PURE__ */ jsx("img", { alt: module.key ?? module.name, src: module.icon }) : module.icon,
                            /* @__PURE__ */ jsxs(
                              "div",
                              {
                                className: "chatbot-component-header-dropdown-item-content-text",
                                style: { display: "flex", flexDirection: "column" },
                                children: [
                                  /* @__PURE__ */ jsx(
                                    "span",
                                    {
                                      className: "chatbot-component-header-dropdown-item-content-text-name",
                                      style: {
                                        fontWeight: 600,
                                        fontSize: 16,
                                        lineHeight: "24px",
                                        color: "#1F2B4D"
                                      },
                                      children: module.name
                                    }
                                  ),
                                  /* @__PURE__ */ jsx(
                                    "span",
                                    {
                                      className: "chatbot-component-header-dropdown-item-content-text-description",
                                      style: {
                                        fontWeight: 500,
                                        fontSize: 12,
                                        lineHeight: "16px",
                                        color: "#7A8294"
                                      },
                                      children: module.description
                                    }
                                  )
                                ]
                              }
                            )
                          ]
                        }
                      ),
                      activeModule === module.name && /* @__PURE__ */ jsx("img", { alt: "active", src: ActiveIcon })
                    ]
                  },
                  `${module.id ?? module.name ?? idx}`
                ))
              }
            )
          }
        )
      ] })
    ] }),
    !hideCenterOptions && /* @__PURE__ */ jsxs("div", { className: "center_options_container", children: [
      /* @__PURE__ */ jsx("div", { className: "left_tabs_container", children: /* @__PURE__ */ jsx("ul", { children: threadList.map((thread, idx) => /* @__PURE__ */ jsx(
        "li",
        {
          className: `${activeThread === thread ? "active" : ""} ${thread === "Home" ? "home" : ""}`,
          onClick: () => {
            setActiveThread(thread);
          },
          children: thread === "Home" ? /* @__PURE__ */ jsx("img", { alt: "home", src: HomeIcon }) : /* @__PURE__ */ jsxs(Fragment, { children: [
            thread,
            /* @__PURE__ */ jsx("span", { className: "close_thread", children: /* @__PURE__ */ jsx(
              "img",
              {
                alt: "close thread",
                src: CloseThreadIcon,
                onClick: (e) => {
                  handleCloseThread(e, idx);
                }
              }
            ) })
          ] })
        },
        idx
      )) }) }),
      /* @__PURE__ */ jsx("div", { className: "right_info_container" })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "right_close_save_icon_container", children: [
      handleSavedChat && /* @__PURE__ */ jsx("div", { className: "save_icon_container", children: /* @__PURE__ */ jsx(
        Button,
        {
          icon: /* @__PURE__ */ jsx(default_1$2, {}),
          iconPlacement: "left",
          size: "small",
          type: "default",
          variant: "text",
          onClick: handleSavedChat
        }
      ) }),
      !isFullWidth && /* @__PURE__ */ jsx("div", { className: "close_icon_container", children: /* @__PURE__ */ jsx(
        Button,
        {
          icon: /* @__PURE__ */ jsx(default_1$3, {}),
          iconPlacement: "left",
          size: "small",
          type: "default",
          variant: "text",
          onClick: onClose
        }
      ) })
    ] })
  ] });
}
export {
  ChatbotModuleMenu
};
