import { Tabs } from "@wix/design-system";
import React, { useContext, useState } from "react";
import { ModalServiceContext, RicosContext } from "./../../ricos-context/index.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 {
  SETTINGS_LINKPREVIEW_MODAL,
  SETTINGS_LINKPREVIEW_TABS
} from "./../../plugin-link-preview/data-hooks.js";
import {
  Panel,
  PanelHeader,
  useClickOutside,
  usePanelContainerElement
} from "./../../ui-components/index.js";
import { linkPreviewModals } from "../consts.js";
import classes from "../statics/styles/settings-modal-scss.js";
import { DesignTab } from "./design-tab.js";
import { SettingsTab } from "./settings-tab.js";
const SettingsModal = ({
  nodeId,
  activeTab,
  config,
  referenceElement
}) => {
  const modalService = useContext(ModalServiceContext) || {};
  const containerEl = usePanelContainerElement();
  const { t, isMobile } = useContext(RicosContext);
  const [activeId, setActiveId] = useState(activeTab);
  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, PmNodeType.LINK_PREVIEW);
  const isColorPickerModalOpen = () => modalService.isModalOpen(linkPreviewModals.colorPicker);
  const closeModal = () => modalService.closeModal(linkPreviewModals.settings);
  useClickOutside({
    containerRef: { current: containerEl },
    onClickOutside: (e) => {
      const target = e.target;
      if (referenceElement?.contains(target)) {
        return;
      }
      closeModal();
    },
    disable: isColorPickerModalOpen()
  });
  if (!pmNodeAttrs) {
    logInvariant(new Error("Link preview settings: node attrs not found"));
    return null;
  }
  return /* @__PURE__ */ React.createElement("div", { className: classes.modal }, /* @__PURE__ */ React.createElement(
    Panel,
    {
      closeButtonProps: { onClick: () => modalService.closeModal(linkPreviewModals.settings) },
      dataHook: SETTINGS_LINKPREVIEW_MODAL,
      maxHeight: isMobile ? void 0 : 590
    },
    /* @__PURE__ */ React.createElement(PanelHeader, { title: t("LinkPreview_Design_Panel_Header") }),
    /* @__PURE__ */ React.createElement(
      Tabs,
      {
        dataHook: SETTINGS_LINKPREVIEW_TABS,
        size: "small",
        alignment: "center",
        type: "uniformFull",
        minWidth: 0,
        activeId,
        onClick: (value) => setActiveId(value.id),
        items: [
          { id: "settings", title: t("LinkPreview_Design_Panel_Tab_Layout") },
          { id: "design", title: t("LinkPreview_Design_Panel_Tab_Design") }
        ]
      }
    ),
    activeId === "settings" && /* @__PURE__ */ React.createElement(SettingsTab, { nodeId }),
    activeId === "design" && /* @__PURE__ */ React.createElement(
      DesignTab,
      {
        nodeId,
        config,
        modalId: linkPreviewModals.settings,
        pmNodeAttrs,
        patchPmNodeAttrs
      }
    )
  ));
};
export {
  SettingsModal
};
//# sourceMappingURL=settings-modal.js.map
