import { Tabs } from "@wix/design-system";
import React, { useContext, useState } from "react";
import { ModalServiceContext, RicosContext } from "./../../../ricos-context/index.js";
import { useBiNext } from "./../../../_shared/bi-context-provider/bi-context-provider.js";
import { logInvariant } from "./../../../_shared/log-invariant.js";
import { PmNodeType } from "./../../../_shared/pm-node-types.js";
import { useNodeAttrs } from "./../../../_shared/use-node-attrs.js";
import {
  Panel,
  PanelHeader,
  useClickOutside,
  usePanelContainerElement
} from "./../../../ui-components/index.js";
import {
  CELL_SETTINGS_COLOR_PICKER_MODAL_ID,
  LAYOUT_SETTINGS_MODAL_ID,
  LAYOUT_SETTINGS_TABS
} from "../data-hooks.js";
import { DesignTab } from "./design-tab.js";
import { LayoutTab } from "./layout-tab.js";
const Settings = ({
  nodeId,
  config,
  referenceElement,
  initialTab = "design"
}) => {
  const { t, isMobile } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext) || {};
  const containerEl = usePanelContainerElement();
  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, PmNodeType.LAYOUT);
  const [activeTab, setActiveTab] = useState(initialTab);
  const logBi = useBiNext({ modalId: LAYOUT_SETTINGS_MODAL_ID, pluginId: "layout", nodeId });
  const closeModal = () => modalService.closeModal(LAYOUT_SETTINGS_MODAL_ID);
  const isColorPickerModalOpen = () => modalService.isModalOpen(CELL_SETTINGS_COLOR_PICKER_MODAL_ID);
  useClickOutside({
    containerRef: { current: containerEl },
    onClickOutside: (e) => {
      const target = e.target;
      if (referenceElement?.contains(target)) {
        return;
      }
      closeModal();
    },
    disable: isColorPickerModalOpen()
  });
  if (!pmNodeAttrs) {
    logInvariant(new Error("Layout settings: node attrs not found"));
    return null;
  }
  return /* @__PURE__ */ React.createElement(
    Panel,
    {
      onCloseButtonClick: () => modalService.closeModal(LAYOUT_SETTINGS_MODAL_ID),
      dataHook: LAYOUT_SETTINGS_MODAL_ID,
      maxHeight: isMobile ? void 0 : 590
    },
    /* @__PURE__ */ React.createElement(PanelHeader, { title: t("Layout_SettingsModal_Header") }),
    /* @__PURE__ */ React.createElement(
      Tabs,
      {
        dataHook: LAYOUT_SETTINGS_TABS,
        size: "small",
        alignment: "center",
        type: "uniformFull",
        minWidth: 0,
        activeId: activeTab,
        onClick: (value) => {
          setActiveTab(value.id);
          logBi({ dataHook: LAYOUT_SETTINGS_TABS, value: value.id });
        },
        items: [
          { id: "design", title: t("Layout_SettingsModal_Tab_Design") },
          { id: "layout", title: t("Layout_SettingsModal_Tab_Layout") }
        ]
      }
    ),
    (() => {
      switch (activeTab) {
        case "design":
          return /* @__PURE__ */ React.createElement(
            DesignTab,
            {
              pmNodeAttrs,
              patchPmNodeAttrs,
              nodeId,
              config
            }
          );
        case "layout":
          return /* @__PURE__ */ React.createElement(
            LayoutTab,
            {
              nodeId,
              pmNodeAttrs,
              patchPmNodeAttrs
            }
          );
        default:
          return null;
      }
    })()
  );
};
export {
  Settings
};
//# sourceMappingURL=settings.js.map
