import { Box, IconButton, ListItemSelect, Popover, Tag, TextButton } from "@wix/design-system";
import { Adjust } from "@wix/wix-ui-icons-common";
import React from "react";
import { RicosContext } from "./../../../ricos-context/index.js";
const WidgetTypeSelector = ({ selectedId, options, onSelect, onRemove }) => {
  const { t } = React.useContext(RicosContext);
  const [shown, setShown] = React.useState(false);
  const toggle = () => setShown((prev) => !prev);
  return /* @__PURE__ */ React.createElement(Box, { gap: "8px", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ React.createElement(
    Popover,
    {
      showArrow: true,
      shown,
      appendTo: "scrollParent",
      placement: "top",
      zIndex: 5301,
      onClickOutside: () => setShown(false)
    },
    /* @__PURE__ */ React.createElement(Popover.Element, null, /* @__PURE__ */ React.createElement(Box, { verticalAlign: "middle" }, selectedId ? /* @__PURE__ */ React.createElement(Box, { marginInlineStart: "-6px" }, /* @__PURE__ */ React.createElement(IconButton, { onClick: toggle, priority: "tertiary", skin: "dark" }, /* @__PURE__ */ React.createElement(Adjust, null))) : /* @__PURE__ */ React.createElement(
      TextButton,
      {
        underline: "onHover",
        prefixIcon: /* @__PURE__ */ React.createElement(Box, { width: "fit-content", height: "100%", verticalAlign: "middle" }, /* @__PURE__ */ React.createElement(Adjust, null)),
        onClick: toggle,
        skin: "dark",
        size: "medium"
      },
      t("HtmlPlugin_AiWidget_WidgetTypeSelector_ButtonLabel")
    ))),
    /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(Box, { paddingBlock: "12px", direction: "vertical", maxWidth: "200px" }, options.map((option) => /* @__PURE__ */ React.createElement(
      ListItemSelect,
      {
        key: option.id,
        title: t(option.label),
        prefix: option.icon,
        selected: selectedId === option.id,
        onClick: () => {
          toggle();
          onSelect(option.id);
        },
        size: "small"
      }
    ))))
  ), selectedId && /* @__PURE__ */ React.createElement(Tag, { size: "large", id: selectedId, removable: true, onRemove: () => onRemove(selectedId) }, t(options.find((option) => option.id === selectedId)?.label ?? "")));
};
export {
  WidgetTypeSelector
};
//# sourceMappingURL=widget-type-selector.js.map
