import { Box, Divider, Text } from "@wix/design-system";
import React, { useContext } from "react";
import { RicosContext } from "./../../../../../ricos-context/index.js";
import { GalleryOptions_Layout_Orientation } from "./../../../../../ricos-schema/next-schema/index.js";
import {
  SliderWithInput,
  usePanelContainerElement
} from "./../../../../../ui-components/index.js";
import {
  LAYOUT_SETTINGS_ITEMS_PER_ROW_INPUT,
  LAYOUT_SETTINGS_ITEMS_PER_ROW_SLIDER,
  LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_INPUT,
  LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_SLIDER,
  LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_INPUT,
  LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_SLIDER,
  LAYOUT_SETTINGS_THUMBNAIL_SIZE_INPUT,
  LAYOUT_SETTINGS_THUMBNAIL_SIZE_SLIDER
} from "../../../../data-hooks.js";
import { ImageOrientationControl } from "./image-orientation-control.js";
import { ImageRatioControl } from "./image-ratio-control.js";
import { ScrollDirectionControl } from "./scroll-direction-control.js";
import { ThumbnailAlignmentControl } from "./thumbnail-alignment-control.js";
import { ThumbnailCropControl } from "./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 } = useContext(RicosContext);
  const containerEl = 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__ */ React.createElement(
      SliderWithInput,
      {
        min: 1,
        max: 5,
        label: t("GallerySettings_Sliders_Items_Per_Row"),
        sliderDataHook: LAYOUT_SETTINGS_ITEMS_PER_ROW_SLIDER,
        inputDataHook: LAYOUT_SETTINGS_ITEMS_PER_ROW_INPUT,
        onChange: (value) => applyGallerySetting({ numberOfColumns: value }, "layout"),
        tooltipAppendTo: containerEl,
        value: data.options?.layout?.numberOfColumns ?? 1,
        logBi
      }
    ),
    thumbnailSize: /* @__PURE__ */ React.createElement(
      SliderWithInput,
      {
        min: 10,
        max: 1e3,
        sliderDataHook: LAYOUT_SETTINGS_THUMBNAIL_SIZE_SLIDER,
        inputDataHook: 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__ */ React.createElement(
      SliderWithInput,
      {
        onChange: (value) => applyGallerySetting({ spacing: value }, "item"),
        value: getNumericValue(getValueFromOptionsItem("spacing"), 5),
        label: t("GallerySettings_Spacing_Between_Items"),
        sliderDataHook: LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_SLIDER,
        inputDataHook: LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_INPUT,
        tooltipTextKey: t("GallerySettings_Spacing_Between_Items_Tooltip"),
        min: 0,
        max: 100,
        tooltipAppendTo: containerEl,
        logBi
      }
    ),
    thumbnailSpacing: /* @__PURE__ */ React.createElement(
      SliderWithInput,
      {
        onChange: (value) => applyGallerySetting({ spacing: Math.trunc(value) }, "thumbnails"),
        value: getNumericValue(getValueFromOptionsThumbnails("spacing"), 5),
        label: t("GallerySettings_Spacing_Between_Items"),
        sliderDataHook: LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_SLIDER,
        inputDataHook: LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_INPUT,
        tooltipTextKey: t("GallerySettings_Spacing_Between_Items_Tooltip"),
        min: 0,
        max: 100,
        tooltipAppendTo: containerEl,
        logBi
      }
    ),
    thumbnailCrop: /* @__PURE__ */ React.createElement(
      ThumbnailCropControl,
      {
        onChange: (value) => applyGallerySetting({ crop: value }, "item"),
        value: getValueFromOptionsItem("crop"),
        logBi
      }
    ),
    imageRatio: /* @__PURE__ */ React.createElement(
      ImageRatioControl,
      {
        onChange: (value) => applyGallerySetting({ ratio: value }, "item"),
        value: getValueFromOptionsItem("ratio"),
        logBi
      }
    ),
    imageOrientation: /* @__PURE__ */ React.createElement(
      ImageOrientationControl,
      {
        onChange: (value) => applyGallerySetting({ orientation: value }, "layout"),
        value: data.options?.layout?.orientation ?? GalleryOptions_Layout_Orientation.COLUMNS,
        logBi
      }
    ),
    scrollDirection: /* @__PURE__ */ React.createElement(
      ScrollDirectionControl,
      {
        onChange: (value) => applyGallerySetting({ horizontalScroll: value === "horizontal" }, "layout"),
        value: data.options?.layout?.horizontalScroll ? "horizontal" : "vertical",
        logBi
      }
    ),
    thumbnailAlignment: /* @__PURE__ */ React.createElement(
      ThumbnailAlignmentControl,
      {
        onChange: (value) => applyGallerySetting({ placement: value }, "thumbnails"),
        value: getValueFromOptionsThumbnails("placement"),
        logBi
      }
    ),
    divider: /* @__PURE__ */ React.createElement(Divider, null)
  };
  if (controlsByLayout[layout].length === 0) {
    return null;
  }
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { marginTop: "SP3", marginBottom: "SP2", marginInline: "-24px" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(Text, { weight: "bold", size: "small" }, t("GalleryPlugin_Layout_Options_Title")), controlsByLayout[layout].map((name) => controls[name])));
};
export {
  LayoutControlsSection
};
//# sourceMappingURL=layout-controls-section.js.map
