"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 layout_controls_section_exports = {};
__export(layout_controls_section_exports, {
  LayoutControlsSection: () => LayoutControlsSection
});
module.exports = __toCommonJS(layout_controls_section_exports);
var import_design_system = require("@wix/design-system");
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../../../../ricos-context/index.js");
var import_next_schema = require("./../../../../../ricos-schema/next-schema/index.js");
var import_ui_components = require("./../../../../../ui-components/index.js");
var import_data_hooks = require("../../../../data-hooks.js");
var import_image_orientation_control = require("./image-orientation-control.js");
var import_image_ratio_control = require("./image-ratio-control.js");
var import_scroll_direction_control = require("./scroll-direction-control.js");
var import_thumbnail_alignment_control = require("./thumbnail-alignment-control.js");
var import_thumbnail_crop_control = require("./thumbnail-crop-control.js");
const controlsByLayout = {
  COLLAGE: ["scrollDirection", "imageOrientation", "divider", "thumbnailSize", "spacing"],
  MASONRY: ["imageOrientation", "divider", "thumbnailSize", "spacing"],
  GRID: ["thumbnailCrop", "imageRatio", "divider", "itemsPerRow"],
  THUMBNAIL: ["thumbnailAlignment", "divider", "thumbnailSpacing"],
  SLIDER: ["spacing", "thumbnailCrop", "imageRatio"],
  SLIDESHOW: [],
  PANORAMA: ["spacing"],
  COLUMN: ["spacing"],
  MAGIC: [],
  FULLSIZE: []
};
const LayoutControlsSection = ({
  data,
  updateData,
  layout,
  logBi
}) => {
  const { t } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const getValueFromOptionsItem = (name) => data.options?.item?.[name];
  const getValueFromOptionsThumbnails = (name) => data.options?.thumbnails?.[name];
  const getNumericValue = (value, defaultValue) => typeof value === "number" ? value : defaultValue;
  const applyGallerySetting = (setting, key) => {
    const componentData = {
      ...data,
      options: {
        ...data.options,
        [key]: { ...data.options?.[key], ...setting }
      }
    };
    updateData(componentData);
  };
  const controls = {
    itemsPerRow: /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.SliderWithInput,
      {
        min: 1,
        max: 5,
        label: t("GallerySettings_Sliders_Items_Per_Row"),
        sliderDataHook: import_data_hooks.LAYOUT_SETTINGS_ITEMS_PER_ROW_SLIDER,
        inputDataHook: import_data_hooks.LAYOUT_SETTINGS_ITEMS_PER_ROW_INPUT,
        onChange: (value) => applyGallerySetting({ numberOfColumns: value }, "layout"),
        tooltipAppendTo: containerEl,
        value: data.options?.layout?.numberOfColumns ?? 1,
        logBi
      }
    ),
    thumbnailSize: /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.SliderWithInput,
      {
        min: 10,
        max: 1e3,
        sliderDataHook: import_data_hooks.LAYOUT_SETTINGS_THUMBNAIL_SIZE_SLIDER,
        inputDataHook: import_data_hooks.LAYOUT_SETTINGS_THUMBNAIL_SIZE_INPUT,
        onChange: (value) => applyGallerySetting({ targetSize: value }, "item"),
        value: getNumericValue(getValueFromOptionsItem("targetSize"), 300),
        label: data.options?.layout?.orientation === "COLUMNS" ? t("GallerySettings_LayoutControlSection_Column") : t("GallerySettings_LayoutControlSection_Row"),
        tooltipAppendTo: containerEl,
        logBi
      }
    ),
    spacing: /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.SliderWithInput,
      {
        onChange: (value) => applyGallerySetting({ spacing: value }, "item"),
        value: getNumericValue(getValueFromOptionsItem("spacing"), 5),
        label: t("GallerySettings_Spacing_Between_Items"),
        sliderDataHook: import_data_hooks.LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_SLIDER,
        inputDataHook: import_data_hooks.LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_INPUT,
        tooltipTextKey: t("GallerySettings_Spacing_Between_Items_Tooltip"),
        min: 0,
        max: 100,
        tooltipAppendTo: containerEl,
        logBi
      }
    ),
    thumbnailSpacing: /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.SliderWithInput,
      {
        onChange: (value) => applyGallerySetting({ spacing: Math.trunc(value) }, "thumbnails"),
        value: getNumericValue(getValueFromOptionsThumbnails("spacing"), 5),
        label: t("GallerySettings_Spacing_Between_Items"),
        sliderDataHook: import_data_hooks.LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_SLIDER,
        inputDataHook: import_data_hooks.LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_INPUT,
        tooltipTextKey: t("GallerySettings_Spacing_Between_Items_Tooltip"),
        min: 0,
        max: 100,
        tooltipAppendTo: containerEl,
        logBi
      }
    ),
    thumbnailCrop: /* @__PURE__ */ import_react.default.createElement(
      import_thumbnail_crop_control.ThumbnailCropControl,
      {
        onChange: (value) => applyGallerySetting({ crop: value }, "item"),
        value: getValueFromOptionsItem("crop"),
        logBi
      }
    ),
    imageRatio: /* @__PURE__ */ import_react.default.createElement(
      import_image_ratio_control.ImageRatioControl,
      {
        onChange: (value) => applyGallerySetting({ ratio: value }, "item"),
        value: getValueFromOptionsItem("ratio"),
        logBi
      }
    ),
    imageOrientation: /* @__PURE__ */ import_react.default.createElement(
      import_image_orientation_control.ImageOrientationControl,
      {
        onChange: (value) => applyGallerySetting({ orientation: value }, "layout"),
        value: data.options?.layout?.orientation ?? import_next_schema.GalleryOptions_Layout_Orientation.COLUMNS,
        logBi
      }
    ),
    scrollDirection: /* @__PURE__ */ import_react.default.createElement(
      import_scroll_direction_control.ScrollDirectionControl,
      {
        onChange: (value) => applyGallerySetting({ horizontalScroll: value === "horizontal" }, "layout"),
        value: data.options?.layout?.horizontalScroll ? "horizontal" : "vertical",
        logBi
      }
    ),
    thumbnailAlignment: /* @__PURE__ */ import_react.default.createElement(
      import_thumbnail_alignment_control.ThumbnailAlignmentControl,
      {
        onChange: (value) => applyGallerySetting({ placement: value }, "thumbnails"),
        value: getValueFromOptionsThumbnails("placement"),
        logBi
      }
    ),
    divider: /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null)
  };
  if (controlsByLayout[layout].length === 0) {
    return null;
  }
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { marginTop: "SP3", marginBottom: "SP2", marginInline: "-24px" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { weight: "bold", size: "small" }, t("GalleryPlugin_Layout_Options_Title")), controlsByLayout[layout].map((name) => controls[name])));
};
//# sourceMappingURL=layout-controls-section.js.map
