import React, { useContext } from "react";
import { RicosContext } from "./../../../../ricos-context/index.js";
import { GalleryOptions_Layout_Type } from "./../../../../ricos-schema/next-schema/index.js";
import { useNodeAttrs } from "./../../../../_shared/use-node-attrs.js";
import {
  ThumbnailPicker,
  usePanelContainerElement
} from "./../../../../ui-components/index.js";
import {
  LAYOUT_SETTINGS_LAYOUT_THUMBNAIL,
  LAYOUT_SETTINGS_LAYOUT_THUMBNAIL_PICKER
} from "../../../data-hooks.js";
import {
  LayoutCollageIcon,
  LayoutColumnsIcon,
  LayoutGridIcon,
  LayoutMasonryIcon,
  LayoutPanoramaIcon,
  LayoutSlidesIcon,
  LayoutSlideshowIcon,
  LayoutThumbnailsIcon
} from "../../../icons/index.js";
import { layoutRicosData } from "../../../layout-data-provider.js";
import { LayoutControlsSection } from "./layout-controls-section/layout-controls-section.js";
const LayoutSettings = ({ nodeId, logBi }) => {
  const { t } = useContext(RicosContext);
  const containerEl = usePanelContainerElement();
  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, "GALLERY");
  const layoutType = pmNodeAttrs?.options?.layout?.type;
  return pmNodeAttrs && pmNodeAttrs.options && layoutType ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    ThumbnailPicker,
    {
      selectedValue: layoutType,
      onChange: (galleryLayout) => {
        const defaultData = {
          ...pmNodeAttrs.options,
          ...layoutRicosData[galleryLayout]
        };
        patchPmNodeAttrs({
          ...pmNodeAttrs,
          options: {
            ...defaultData,
            layout: { ...defaultData?.layout, type: galleryLayout }
          }
        });
      },
      dataSource: galleryLayouts.map(({ label, value, icon: Icon }) => ({
        value,
        dataHook: `${LAYOUT_SETTINGS_LAYOUT_THUMBNAIL}${value}`,
        renderBackgroundImage: (props) => /* @__PURE__ */ React.createElement(Icon, { ...props }),
        label: t(label)
      })),
      tooltipAppendTo: containerEl,
      dataHook: LAYOUT_SETTINGS_LAYOUT_THUMBNAIL_PICKER,
      logBi
    }
  ), /* @__PURE__ */ React.createElement(
    LayoutControlsSection,
    {
      layout: layoutType,
      data: pmNodeAttrs,
      updateData: patchPmNodeAttrs,
      logBi
    }
  )) : null;
};
const galleryLayouts = [
  {
    value: GalleryOptions_Layout_Type.GRID,
    label: "GalleryPlugin_Layout_Grid",
    icon: LayoutGridIcon
  },
  {
    value: GalleryOptions_Layout_Type.MASONRY,
    label: "GalleryPlugin_Layout_Masonry",
    icon: LayoutMasonryIcon
  },
  {
    value: GalleryOptions_Layout_Type.COLLAGE,
    label: "GalleryPlugin_Layout_Collage",
    icon: LayoutCollageIcon
  },
  {
    value: GalleryOptions_Layout_Type.THUMBNAIL,
    label: "GalleryPlugin_Layout_Thumbnails",
    icon: LayoutThumbnailsIcon
  },
  {
    value: GalleryOptions_Layout_Type.FULLSIZE,
    label: "GalleryPlugin_Layout_Slideshow",
    icon: LayoutSlideshowIcon
  },
  {
    value: GalleryOptions_Layout_Type.PANORAMA,
    label: "GalleryPlugin_Layout_Panorama",
    icon: LayoutPanoramaIcon
  },
  {
    value: GalleryOptions_Layout_Type.COLUMN,
    label: "GalleryPlugin_Layout_Columns",
    icon: LayoutColumnsIcon
  },
  {
    value: GalleryOptions_Layout_Type.SLIDER,
    label: "GalleryPlugin_Layout_Slides",
    icon: LayoutSlidesIcon
  }
];
export {
  LayoutSettings
};
//# sourceMappingURL=layout-settings.js.map
