import { Box, FormField, Thumbnail } from "@wix/design-system";
import React, { useContext } from "react";
import { ZIndexContext } from "./../../ricos-context/index.js";
import classes from "./thumbnail-picker-scss.js";
const ThumbnailPicker = ({
  title,
  titleInfoContent,
  selectedValue,
  onChange,
  dataSource,
  tooltipAppendTo,
  size = "tiny",
  dataHook,
  logBi
}) => {
  const zIndexService = useContext(ZIndexContext);
  return /* @__PURE__ */ React.createElement(
    FormField,
    {
      label: title,
      infoContent: titleInfoContent,
      infoTooltipProps: {
        appendTo: tooltipAppendTo ?? ((el) => Boolean(el.getAttribute("data-hook")?.includes("ricos-portal"))),
        zIndex: zIndexService.getZIndex("TOOLTIP")
      },
      dataHook
    },
    /* @__PURE__ */ React.createElement("div", { className: classes.container }, dataSource.map(({ value, dataHook: thumbnailDataHook, renderBackgroundImage, label }) => /* @__PURE__ */ React.createElement(
      Thumbnail,
      {
        key: value,
        size,
        selected: value === selectedValue,
        title: label ? label : void 0,
        onClick: () => {
          if (dataHook) {
            logBi?.({ dataHook, value });
          }
          onChange(value);
        },
        dataHook: thumbnailDataHook,
        image: /* @__PURE__ */ React.createElement(Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, renderBackgroundImage({ width: "70%", height: "70%" })),
        ellipsis: true,
        textPosition: "outside",
        tooltipProps: {
          appendTo: tooltipAppendTo ?? ((el) => Boolean(el.getAttribute("data-hook")?.includes("ricos-portal"))),
          zIndex: zIndexService.getZIndex("TOOLTIP"),
          enterDelay: 1e3
        }
      }
    )))
  );
};
export {
  ThumbnailPicker
};
//# sourceMappingURL=thumbnail-picker.js.map
