import React, { useContext, useState } from "react";
import { ModalServiceContext } from "./../../ricos-context/index.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { useNodeAttrs } from "./../../_shared/use-node-attrs.js";
import {
  useClickOutside,
  usePanelContainerElement
} from "./../../ui-components/index.js";
import { SETTINGS_TAB, buttonsModals } from "../constants.js";
import { LINK_BUTTON_TYPE } from "../types.js";
import { SettingsModalContent } from "./settings-modal-content.js";
const ButtonSettingsModal = ({
  nodeId,
  settings,
  type,
  modalId,
  activeTab: tab,
  referenceElement
}) => {
  const modalService = useContext(ModalServiceContext) || {};
  const containerEl = usePanelContainerElement();
  const nodeType = type === LINK_BUTTON_TYPE ? "LINK_BUTTON" : "ACTION_BUTTON";
  const logBi = useBiNext({
    modalId: buttonsModals.settings[type],
    pluginId: nodeType === "LINK_BUTTON" ? "linkButton" : "actionButton",
    nodeId
  });
  const { patchPmNodeAttrs, pmNodeAttrs } = useNodeAttrs(nodeId, nodeType);
  const [activeTab, setActiveTab] = useState(tab ?? SETTINGS_TAB.SETTINGS);
  const handleOnChange = (data) => patchPmNodeAttrs?.(data);
  const isColorPickerModalOpen = () => modalService.isModalOpen(buttonsModals.colorPicker);
  const closeModal = () => modalService.closeModal(modalId);
  useClickOutside({
    containerRef: { current: containerEl },
    onClickOutside: (e) => {
      const target = e.target;
      if (referenceElement?.contains(target)) {
        return;
      }
      closeModal();
    },
    disable: isColorPickerModalOpen()
  });
  return pmNodeAttrs ? /* @__PURE__ */ React.createElement(
    SettingsModalContent,
    {
      buttonData: pmNodeAttrs,
      config: settings,
      onClose: closeModal,
      onChange: handleOnChange,
      nodeId,
      nodeType,
      activeTab,
      onTabChange: setActiveTab,
      logBi
    }
  ) : null;
};
export {
  ButtonSettingsModal
};
//# sourceMappingURL=settings-modal.js.map
