"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var table_spacing_modal_exports = {};
__export(table_spacing_modal_exports, {
  TableSpacingModal: () => TableSpacingModal
});
module.exports = __toCommonJS(table_spacing_modal_exports);
var import_design_system = require("@wix/design-system");
var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../ricos-context/index.js");
var import_bi_context_provider = require("./../../_shared/bi-context-provider/bi-context-provider.js");
var import_ui_components = require("./../../ui-components/index.js");
var import_consts = require("../consts.js");
var import_data_hooks = require("../data-hooks.js");
var import_defaults = require("../defaults.js");
const TableSpacingModal = ({
  nodeId,
  referenceElement,
  cellSpacing = import_defaults.TABLE_DEFAULTS.cellSpacing,
  onCellSpacingPreview,
  onCellSpacingCommit,
  cellPadding = [...import_defaults.TABLE_DEFAULTS.cellPadding],
  onCellPaddingPreview,
  onCellPaddingCommit
}) => {
  const { t, isMobile } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const modalService = (0, import_react.useContext)(import_ricos_context.ModalServiceContext);
  const zIndexService = (0, import_react.useContext)(import_ricos_context.ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const logBi = (0, import_bi_context_provider.useBiNext)({
    modalId: import_consts.TABLE_BUTTONS_MODALS_ID.SPACING,
    pluginId: "table",
    nodeId
  });
  const [localCellSpacing, setLocalCellSpacing] = (0, import_react.useState)(cellSpacing);
  const normalizedPadding = Array.isArray(cellPadding) ? cellPadding : [cellPadding, cellPadding, cellPadding, cellPadding];
  const [localCellPadding, setLocalCellPadding] = (0, import_react.useState)(normalizedPadding);
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  (0, import_react.useEffect)(() => {
    setLocalCellSpacing(cellSpacing);
  }, [cellSpacing]);
  (0, import_react.useEffect)(() => {
    const normalized = Array.isArray(cellPadding) ? cellPadding : [cellPadding, cellPadding, cellPadding, cellPadding];
    setLocalCellPadding(normalized);
  }, [cellPadding]);
  const closeModal = (0, import_react.useCallback)(() => {
    modalService.closeModal(import_consts.TABLE_BUTTONS_MODALS_ID.SPACING);
  }, [modalService]);
  const handleCellSpacingPreview = (0, import_react.useCallback)(
    (spacing) => {
      setLocalCellSpacing(spacing);
      onCellSpacingPreview?.(spacing);
    },
    [onCellSpacingPreview]
  );
  const handleCellSpacingCommit = (0, import_react.useCallback)(
    (spacing) => {
      setLocalCellSpacing(spacing);
      onCellSpacingCommit?.(spacing);
    },
    [onCellSpacingCommit]
  );
  const handleCellPaddingPreview = (0, import_react.useCallback)(
    (padding) => {
      setLocalCellPadding(padding);
      onCellPaddingPreview?.(padding);
    },
    [onCellPaddingPreview]
  );
  const handleCellPaddingCommit = (0, import_react.useCallback)(
    (padding) => {
      setLocalCellPadding(padding);
      onCellPaddingCommit?.(padding);
    },
    [onCellPaddingCommit]
  );
  (0, import_ui_components.useClickOutside)({
    containerRef: { current: containerEl },
    onClickOutside: (e) => {
      const target = e.target;
      if (referenceElement?.contains(target)) {
        return;
      }
      if (target?.closest('[role="tooltip"]')) {
        return;
      }
      closeModal();
    },
    disable: false
  });
  return /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.Panel,
    {
      closeButtonProps: { onClick: closeModal },
      width: isMobile ? "100%" : 288,
      maxHeight: isMobile ? void 0 : 555,
      height: "fit-content"
    },
    /* @__PURE__ */ import_react.default.createElement(import_ui_components.PanelHeader, { title: t("TablePlugin_Toolbar_SpacingModal_Title") }),
    /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", overflow: "auto" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", padding: "SP4", paddingTop: "SP3", paddingBottom: "SP3", gap: "SP3" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { inputWidth: "100%" }, /* @__PURE__ */ import_react.default.createElement(
      import_design_system.FieldSet,
      {
        alignment: "center",
        legend: t("TablePlugin_Toolbar_CellSpacing_Label"),
        infoContent: t("TablePlugin_Toolbar_CellSpacing_Info")
      },
      /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", paddingRight: "SP1", width: "50%" }, /* @__PURE__ */ import_react.default.createElement(
        import_ui_components.InputWithSlider,
        {
          value: localCellSpacing,
          dataHook: import_data_hooks.TABLE_CELL_SPACING_INPUT,
          onChange: (value) => {
            handleCellSpacingPreview(value);
            logBi({ dataHook: import_data_hooks.TABLE_CELL_SPACING_INPUT, value });
          },
          onChangeCommit: (value, originalValue) => {
            if (value !== originalValue) {
              handleCellSpacingCommit(value);
            }
          },
          zIndex,
          prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.MoveSmall, null)),
          suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
          min: 0,
          max: 20
        }
      ))
    )), /* @__PURE__ */ import_react.default.createElement(
      PaddingFieldWithLabel,
      {
        logBi,
        label: t("TablePlugin_Toolbar_CellPadding_Label"),
        infoContent: t("TablePlugin_Toolbar_CellPadding_Info"),
        padding: localCellPadding,
        onPreview: handleCellPaddingPreview,
        onCommit: handleCellPaddingCommit,
        zIndex
      }
    )))
  );
};
const PaddingFieldWithLabel = ({
  logBi,
  label,
  infoContent,
  padding,
  onPreview,
  onCommit,
  zIndex
}) => {
  const { t } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const paddingTop = padding[0];
  const paddingRight = padding[1];
  const paddingBottom = padding[2];
  const paddingLeft = padding[3];
  const [mode, setMode] = (0, import_react.useState)(() => {
    if (paddingLeft === paddingRight && paddingTop === paddingBottom) {
      return "directional";
    }
    return "individual";
  });
  const createPaddingSliderHandlers = (getNextPadding, dataHook) => ({
    onChange: (value) => {
      onPreview(getNextPadding(value));
      logBi({ dataHook, value });
    },
    onChangeCommit: (value, originalValue) => {
      if (value !== originalValue) {
        onCommit(getNextPadding(value));
      }
    }
  });
  return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { inputWidth: "100%" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FieldSet,
    {
      alignment: "center",
      legend: label,
      infoContent,
      suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { width: "24px", height: "24px", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(
        import_design_system.ToggleButton,
        {
          border: true,
          labelValue: t("TablePlugin_Toolbar_CellPadding_ToggleIndividual_Label"),
          size: "tiny",
          tooltipProps: { appendTo: containerEl, zIndex },
          selected: mode === "individual",
          onClick: () => {
            setMode(() => mode === "individual" ? "directional" : "individual");
            logBi({
              dataHook: import_data_hooks.TABLE_CELL_PADDING_TOGGLE_INDIVIDUAL,
              value: mode === "individual" ? "directional" : "individual"
            });
            if (mode === "individual") {
              onCommit([paddingTop, paddingLeft, paddingTop, paddingLeft]);
            }
          },
          dataHook: import_data_hooks.TABLE_CELL_PADDING_TOGGLE_INDIVIDUAL
        },
        /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.IndividualPaddingsSmall, null)
      ))
    },
    (() => {
      switch (mode) {
        case "individual":
          return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP1" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingLeft,
              ...createPaddingSliderHandlers(
                (value) => [paddingTop, paddingRight, paddingBottom, value],
                import_data_hooks.TABLE_CELL_PADDING_LEFT
              ),
              dataHook: import_data_hooks.TABLE_CELL_PADDING_LEFT,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingLeftSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingTop,
              ...createPaddingSliderHandlers(
                (value) => [value, paddingRight, paddingBottom, paddingLeft],
                import_data_hooks.TABLE_CELL_PADDING_TOP
              ),
              dataHook: import_data_hooks.TABLE_CELL_PADDING_TOP,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingTopSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          )), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingRight,
              ...createPaddingSliderHandlers(
                (value) => [paddingTop, value, paddingBottom, paddingLeft],
                import_data_hooks.TABLE_CELL_PADDING_RIGHT
              ),
              dataHook: import_data_hooks.TABLE_CELL_PADDING_RIGHT,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingRightSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingBottom,
              ...createPaddingSliderHandlers(
                (value) => [paddingTop, paddingRight, value, paddingLeft],
                import_data_hooks.TABLE_CELL_PADDING_BOTTOM
              ),
              dataHook: import_data_hooks.TABLE_CELL_PADDING_BOTTOM,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingBottomSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          )));
        case "directional":
          return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingLeft,
              ...createPaddingSliderHandlers(
                (value) => [paddingTop, value, paddingTop, value],
                import_data_hooks.TABLE_CELL_PADDING_HORIZONTAL
              ),
              dataHook: import_data_hooks.TABLE_CELL_PADDING_HORIZONTAL,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingHorizontalSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingTop,
              ...createPaddingSliderHandlers(
                (value) => [value, paddingRight, value, paddingRight],
                import_data_hooks.TABLE_CELL_PADDING_VERTICAL
              ),
              dataHook: import_data_hooks.TABLE_CELL_PADDING_VERTICAL,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingVerticalSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ));
        default:
          return null;
      }
    })()
  )));
};
//# sourceMappingURL=table-spacing-modal.js.map
