import { SidePanel, Tabs, TextButton } from "@wix/design-system";
import { Design, Revert } from "@wix/wix-ui-icons-common";
import lodash from "lodash";
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_VERTICAL_EMBED_MODAL,
  SETTINGS_VERTICAL_EMBED_TABS
} from "./../data-hooks.js";
import { FLOATING_PLUGIN_TOOLBAR } from "./../../toolbars-v3/index.js";
import {
  Panel,
  PanelHeader,
  useClickOutside,
  usePanelContainerElement
} from "./../../ui-components/index.js";
import { verticalEmbedModals } from "../constants.js";
import { DesignTab } from "./design-tab.js";
import { LayoutTab } from "./layout-tab.js";
import { Presets } from "./presets.js";
import classes from "./settings-modal-scss.js";
import { SettingsTab } from "./settings-tab.js";
const SettingsModal = ({
  nodeId,
  activeTab,
  config,
  referenceElement,
  initialViewMode,
  modalId
}) => {
  const modalService = useContext(ModalServiceContext) || {};
  const containerEl = usePanelContainerElement();
  const { t, isMobile } = useContext(RicosContext);
  const [activeId, setActiveId] = useState(activeTab);
  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, PmNodeType.APP_EMBED);
  const isColorPickerModalOpen = () => modalService.isModalOpen(verticalEmbedModals.colorPicker);
  const [viewMode] = useState(initialViewMode);
  const closeModal = () => modalService.closeModal(modalId);
  const resetLayoutToDefaults = () => {
    if (!patchPmNodeAttrs) {
      return;
    }
    patchPmNodeAttrs({
      imageStyles: null,
      cardStyles: null,
      ribbonStyles: null
    });
  };
  const resetDesignToDefaults = () => {
    if (!patchPmNodeAttrs) {
      return;
    }
    patchPmNodeAttrs({
      cardStyles: null,
      imageStyles: null,
      buttonStyles: null,
      ribbonStyles: null
    });
  };
  const resetSettingsToDefaults = () => {
    if (!patchPmNodeAttrs) {
      return;
    }
    const baseSettings = {
      hideImage: void 0,
      hideButton: void 0,
      hideRibbon: void 0,
      buttonStyles: {
        ...pmNodeAttrs.buttonStyles,
        buttonText: void 0
      },
      ...pmNodeAttrs.ribbonStyles && {
        ribbonStyles: {
          ...pmNodeAttrs.ribbonStyles,
          ribbonText: void 0
        }
      }
    };
    const embedType = pmNodeAttrs.type;
    if (embedType === "PRODUCT") {
      patchPmNodeAttrs({
        ...baseSettings,
        hidePrice: void 0
      });
    } else if (embedType === "EVENT") {
      patchPmNodeAttrs({
        ...baseSettings,
        hidePrice: void 0,
        hideDateTime: void 0,
        hideLocation: void 0
      });
    } else if (embedType === "BOOKING") {
      patchPmNodeAttrs({
        ...baseSettings,
        hidePrice: void 0,
        hideDuration: void 0,
        hideLocation: void 0
      });
    } else {
      patchPmNodeAttrs(baseSettings);
    }
  };
  useClickOutside({
    containerRef: { current: containerEl },
    onClickOutside: (e) => {
      const target = e.target;
      if (referenceElement?.contains(target)) {
        return;
      }
      closeModal();
    },
    disable: isColorPickerModalOpen()
  });
  if (!pmNodeAttrs) {
    logInvariant(new Error("App embed settings: node attrs not found"));
    return null;
  }
  return /* @__PURE__ */ React.createElement("div", { className: classes.modal }, /* @__PURE__ */ React.createElement(
    Panel,
    {
      onCloseButtonClick: () => modalService.closeModal(modalId),
      dataHook: SETTINGS_VERTICAL_EMBED_MODAL,
      maxHeight: isMobile ? void 0 : 590
    },
    /* @__PURE__ */ React.createElement(PanelHeader, { title: t("Embed_Vertical_Settings_Modal_Header") }),
    viewMode === "presets" && /* @__PURE__ */ React.createElement(Presets, { patchPmNodeAttrs, nodeId }),
    viewMode === "custom" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
      Tabs,
      {
        dataHook: SETTINGS_VERTICAL_EMBED_TABS,
        size: "small",
        alignment: "center",
        type: "uniformFull",
        minWidth: 0,
        activeId,
        onClick: (value) => setActiveId(value.id),
        items: [
          { id: "settings", title: t("Embed_Vertical_Settings_Modal_Settings_Tab") },
          { id: "layout", title: t("Embed_Vertical_Settings_Modal_Layout_Tab") },
          { id: "design", title: t("Embed_Vertical_Settings_Modal_Design_Tab") }
        ]
      }
    ), activeId === "settings" && /* @__PURE__ */ React.createElement(SettingsTab, { pmNodeAttrs, patchPmNodeAttrs }), activeId === "layout" && /* @__PURE__ */ React.createElement(
      LayoutTab,
      {
        nodeId,
        modalId: verticalEmbedModals.settings,
        pmNodeAttrs,
        patchPmNodeAttrs
      }
    ), activeId === "design" && /* @__PURE__ */ React.createElement(
      DesignTab,
      {
        nodeId,
        config,
        modalId: verticalEmbedModals.settings,
        pmNodeAttrs,
        patchPmNodeAttrs
      }
    )),
    /* @__PURE__ */ React.createElement(SidePanel.Footer, null, /* @__PURE__ */ React.createElement("div", { className: classes.centeredFooter }, viewMode === "presets" && /* @__PURE__ */ React.createElement(
      TextButton,
      {
        prefixIcon: /* @__PURE__ */ React.createElement(Design, null),
        size: "small",
        onClick: () => {
          modalService.closeModal(modalId);
          modalService.openModal({
            id: verticalEmbedModals.settings,
            Component: SettingsModal,
            withTransition: true,
            enableDrag: !isMobile,
            dragHandleSelector: "[data-drag-handler]",
            layout: isMobile ? "fullscreen" : "floating",
            componentProps: {
              referenceElement,
              nodeId,
              initialViewMode: "custom",
              activeTab: "settings",
              config,
              modalId: verticalEmbedModals.settings
            },
            positioning: {
              referenceElement: referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement ?? void 0,
              placement: "right-start"
            },
            focusReturnElement: referenceElement ?? void 0,
            disableArrowNavigation: true,
            onClickOutside: {
              on: "pointerup",
              handler: lodash.noop
            }
          });
        }
      },
      t("Embed_Vertical_Settings_Modal_Customize_Button")
    ), viewMode === "custom" && activeId === "settings" && /* @__PURE__ */ React.createElement(TextButton, { prefixIcon: /* @__PURE__ */ React.createElement(Revert, null), size: "small", onClick: resetSettingsToDefaults }, t("Embed_Vertical_Settings_Modal_Reset_Settings_Button")), viewMode === "custom" && activeId === "layout" && /* @__PURE__ */ React.createElement(TextButton, { prefixIcon: /* @__PURE__ */ React.createElement(Revert, null), size: "small", onClick: resetLayoutToDefaults }, t("Embed_Vertical_Settings_Modal_Reset_Layout_Button")), viewMode === "custom" && activeId === "design" && /* @__PURE__ */ React.createElement(TextButton, { prefixIcon: /* @__PURE__ */ React.createElement(Revert, null), size: "small", onClick: resetDesignToDefaults }, t("Embed_Vertical_Settings_Modal_Reset_Design_Button"))))
  ));
};
export {
  SettingsModal
};
//# sourceMappingURL=settings-modal.js.map
