import {
  Carousel,
  CarouselSmall,
  LayoutGallery,
  LayoutGallerySmall,
  LayoutSplit,
  LayoutSplitSmall,
  LayoutTwoColumnsSplit,
  LayoutTwoColumnsSplitSmall,
  MasonaryGrid,
  MasonaryGridSmall,
  Slider,
  SliderSmall,
  Thumbnails,
  ThumbnailsSmall
} from "@wix/wix-ui-icons-common";
import React, { useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { GalleryOptions_Layout_Type as GALLERY_LAYOUT } from "./../../ricos-schema/next-schema/index.js";
import { DropdownModal } from "./../../_shared/dropdown-modal/dropdown-modal.js";
import { ListItemDivider } from "./../../_shared/list-item-divider/list-item-divider.js";
import { ListItemSelect } from "./../../_shared/list-item-select/list-item-select.js";
const CUSTOMIZE_LAYOUT_OPTION_ID = "customize-layout";
const LayoutDropdown = ({
  options,
  selectedId,
  onSelect,
  closeModal
}) => {
  const { t, isMobile } = useContext(RicosContext);
  const customizeOption = options.find((option) => option.id === CUSTOMIZE_LAYOUT_OPTION_ID);
  return /* @__PURE__ */ React.createElement(
    DropdownModal,
    {
      onCloseButtonClick: closeModal,
      title: t("GalleryPlugin_Layout_Dropdown_Title"),
      options: [
        options.filter((option) => option.id !== CUSTOMIZE_LAYOUT_OPTION_ID).map((option) => /* @__PURE__ */ React.createElement(
          ListItemSelect,
          {
            key: option.id,
            dataHook: option.dataHook,
            title: option.text,
            prefix: isMobile ? /* @__PURE__ */ React.createElement(option.iconMobile, null) : /* @__PURE__ */ React.createElement(option.icon, null),
            selected: option.id === selectedId,
            onSelect: () => {
              onSelect(option.id);
              closeModal();
            }
          }
        )),
        /* @__PURE__ */ React.createElement(ListItemDivider, { key: "divider" }),
        customizeOption && /* @__PURE__ */ React.createElement(
          ListItemSelect,
          {
            key: customizeOption.id,
            dataHook: customizeOption.dataHook,
            title: customizeOption.text,
            onSelect: () => {
              onSelect(customizeOption.id);
              closeModal();
            }
          }
        )
      ]
    }
  );
};
const LAYOUT_DROPDOWN_OPTIONS = {
  [GALLERY_LAYOUT.GRID]: {
    text: "GalleryPlugin_Layout_Grid",
    tooltip: "GalleryPlugin_Layout_Grid",
    icon: LayoutGallery,
    iconSmall: LayoutGallerySmall
  },
  [GALLERY_LAYOUT.MASONRY]: {
    text: "GalleryPlugin_Layout_Masonry",
    tooltip: "GalleryPlugin_Layout_Masonry",
    icon: MasonaryGrid,
    iconSmall: MasonaryGridSmall
  },
  [GALLERY_LAYOUT.COLLAGE]: {
    text: "GalleryPlugin_Layout_Collage",
    tooltip: "GalleryPlugin_Layout_Collage",
    icon: (props) => /* @__PURE__ */ React.createElement(
      "div",
      {
        style: {
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          transform: "rotate(90deg)"
        }
      },
      /* @__PURE__ */ React.createElement(MasonaryGrid, { ...props })
    ),
    iconSmall: (props) => /* @__PURE__ */ React.createElement(
      "div",
      {
        style: {
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          transform: "rotate(90deg)"
        }
      },
      /* @__PURE__ */ React.createElement(MasonaryGridSmall, { ...props })
    )
  },
  [GALLERY_LAYOUT.THUMBNAIL]: {
    text: "GalleryPlugin_Layout_Thumbnails",
    tooltip: "GalleryPlugin_Layout_Thumbnails",
    icon: Thumbnails,
    iconSmall: ThumbnailsSmall
  },
  [GALLERY_LAYOUT.FULLSIZE]: {
    text: "GalleryPlugin_Layout_Slideshow",
    tooltip: "GalleryPlugin_Layout_Slideshow",
    icon: Carousel,
    iconSmall: CarouselSmall
  },
  [GALLERY_LAYOUT.PANORAMA]: {
    text: "GalleryPlugin_Layout_Panorama",
    tooltip: "GalleryPlugin_Layout_Panorama",
    icon: LayoutSplit,
    iconSmall: LayoutSplitSmall
  },
  [GALLERY_LAYOUT.COLUMN]: {
    text: "GalleryPlugin_Layout_Columns",
    tooltip: "GalleryPlugin_Layout_Columns",
    icon: LayoutTwoColumnsSplit,
    iconSmall: LayoutTwoColumnsSplitSmall
  },
  [GALLERY_LAYOUT.SLIDER]: {
    text: "GalleryPlugin_Layout_Slides",
    tooltip: "GalleryPlugin_Layout_Slides",
    icon: Slider,
    iconSmall: SliderSmall
  }
};
export {
  CUSTOMIZE_LAYOUT_OPTION_ID,
  LAYOUT_DROPDOWN_OPTIONS,
  LayoutDropdown
};
//# sourceMappingURL=layout-dropdown.js.map
