import { Box, Tabs } from "@wix/design-system";
import React, { useContext, useMemo } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { ACTION_COLOR_DEFAULT } from "./../../ricos-styles/theme-constants.js";
import { unreachable } from "./../../_shared/uncreachable.js";
import { dataHook } from "./../../wix-rich-content-common/index.js";
import { Panel, PanelHeader } from "./../../ui-components/index.js";
import { DesignComponent } from "../components/design-component.js";
import { SettingsComponent } from "../components/settings-component.js";
import { SETTINGS_TAB } from "../constants.js";
import {
  ROOT,
  SETTINGS_DESIGN_TAB,
  SETTINGS_GENERAL_TAB,
  SETTINGS_MODAL,
  SETTINGS_TABS
} from "../data-hooks.js";
import classes from "../statics/styles/button-input-modal-scss.js";
const SettingsModalContent = ({
  buttonData,
  onChange,
  config,
  nodeId,
  nodeType,
  activeTab,
  onTabChange,
  onClose,
  logBi
}) => {
  const { t, isMobile } = useContext(RicosContext);
  const { defaultBackgroundColor, defaultTextColor } = useMemo(() => {
    const button = document.querySelector(dataHook(`editor-${nodeId}`, ROOT));
    const style = button ? window.getComputedStyle(button) : void 0;
    const defaultBackgroundColor2 = config.colors?.color8 ?? (style?.getPropertyValue("--ricos-action-color") || ACTION_COLOR_DEFAULT);
    const defaultTextColor2 = config.colors?.color1 ?? (style?.getPropertyValue("--ricos-text-on-action-color") || style?.getPropertyValue("--ricos-background-color") || "#FFFFFF");
    return { defaultBackgroundColor: defaultBackgroundColor2, defaultTextColor: defaultTextColor2 };
  }, []);
  return /* @__PURE__ */ React.createElement("div", { className: classes.modal }, /* @__PURE__ */ React.createElement(Panel, { closeButtonProps: { onClick: onClose }, dataHook: SETTINGS_MODAL }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("ButtonModal_Header") }), /* @__PURE__ */ React.createElement(
    Tabs,
    {
      dataHook: SETTINGS_TABS,
      onClick: (tab) => onTabChange(tab.id),
      activeId: activeTab,
      size: "small",
      alignment: "center",
      type: "uniformFull",
      minWidth: 0,
      items: [
        {
          id: SETTINGS_TAB.SETTINGS,
          title: t("ButtonModal_Settings_Tab"),
          dataHook: SETTINGS_GENERAL_TAB
        },
        {
          id: SETTINGS_TAB.DESIGN,
          title: t("ButtonModal_Design_Tab"),
          dataHook: SETTINGS_DESIGN_TAB
        }
      ]
    }
  ), /* @__PURE__ */ React.createElement(Box, { className: isMobile ? void 0 : classes.content }, (() => {
    switch (activeTab) {
      case SETTINGS_TAB.SETTINGS:
        return /* @__PURE__ */ React.createElement(SettingsComponent, { buttonData, onChange, logBi });
      case SETTINGS_TAB.DESIGN:
        return /* @__PURE__ */ React.createElement(
          DesignComponent,
          {
            onChange,
            config,
            defaultBackgroundColor,
            defaultTextColor,
            nodeId,
            nodeType,
            logBi
          }
        );
      default:
        unreachable(activeTab);
        return null;
    }
  })())));
};
export {
  SettingsModalContent
};
//# sourceMappingURL=settings-modal-content.js.map
