import { Box, Divider, ListItemSelect } from "@wix/design-system";
import React, { useContext } from "react";
import { EditorContext, ModalServiceContext, RicosContext } from "./../../../ricos-context/index.js";
import { useBiNext } from "./../../../_shared/bi-context-provider/bi-context-provider.js";
import { Panel, PanelHeader, ThumbnailPicker } from "./../../../ui-components/index.js";
import { GridPollIcon } from "../../assets/icons/grid-poll-icon.js";
import { ListPollIcon } from "../../assets/icons/list-poll-icon.js";
import { WithImagePollIcon } from "../../assets/icons/with-image-poll-icon.js";
import { INSERT_POLL_MODAL_ID } from "../../consts.js";
import {
  INSERT_POLL_MODAL,
  INSERT_POLL_MODAL_THUMBNAIL,
  INSERT_POLL_MODAL_THUMBNAIL_PICKER
} from "../../data-hooks.js";
import { POLL_TYPE } from "../../types.js";
import classes from "./insert-modal-scss.js";
import { PRESET_TYPE, createInitialPollData } from "./preset-data.js";
const InsertModal = ({ config }) => {
  const { t, isMobile } = useContext(RicosContext);
  const { getPublicCommands } = useContext(EditorContext);
  const modalService = useContext(ModalServiceContext);
  const logBi = useBiNext({ pluginId: "poll", modalId: INSERT_POLL_MODAL_ID });
  const closeModal = () => modalService.closeModal(INSERT_POLL_MODAL_ID);
  const onPollAdd = (type) => {
    const pollData = createInitialPollData(config, type);
    queueMicrotask(() => getPublicCommands().insertBlockWithBlankLines(POLL_TYPE, pollData));
    closeModal();
  };
  return /* @__PURE__ */ React.createElement(
    Panel,
    {
      closeButtonProps: { onClick: closeModal },
      width: isMobile ? "100%" : 430,
      height: "fit-content",
      dataHook: INSERT_POLL_MODAL
    },
    /* @__PURE__ */ React.createElement(
      PanelHeader,
      {
        title: t("Poll_Presets_Popup_Title"),
        subtitle: t("Poll_Presets_Popup_Subtitle")
      }
    ),
    isMobile ? /* @__PURE__ */ React.createElement(Box, { direction: "vertical" }, presetOptions.map((item) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
      ListItemSelect,
      {
        key: item.value,
        title: t(item.label),
        dataHook: INSERT_POLL_MODAL_THUMBNAIL + item.value,
        onClick: () => {
          logBi({ dataHook: INSERT_POLL_MODAL_THUMBNAIL_PICKER, value: item.value });
          onPollAdd(item.value);
        },
        size: "medium",
        prefix: /* @__PURE__ */ React.createElement(
          "div",
          {
            style: {
              alignItems: "center",
              justifyContent: "center",
              display: "flex",
              border: "1px solid #d3d3d3",
              marginBlock: "10px"
            }
          },
          /* @__PURE__ */ React.createElement(item.icon, null)
        )
      }
    ), /* @__PURE__ */ React.createElement(Divider, null)))) : /* @__PURE__ */ React.createElement(Box, { className: classes.thumbnailPicker, padding: "SP3" }, /* @__PURE__ */ React.createElement(
      ThumbnailPicker,
      {
        selectedValue: void 0,
        onChange: (value) => {
          onPollAdd(value);
        },
        dataSource: presetOptions.map((option) => ({
          value: option.value,
          dataHook: INSERT_POLL_MODAL_THUMBNAIL + option.value,
          renderBackgroundImage: () => /* @__PURE__ */ React.createElement(option.icon, null),
          label: t(option.label)
        })),
        size: "medium",
        logBi,
        dataHook: INSERT_POLL_MODAL_THUMBNAIL_PICKER
      }
    ))
  );
};
const presetOptions = [
  {
    value: PRESET_TYPE.LIST,
    label: "Poll_Presets_Popup_Option_TextList",
    icon: ListPollIcon
  },
  {
    value: PRESET_TYPE.LIST_WITH_IMAGE,
    label: "Poll_Presets_Popup_Option_TextListAndMainImage",
    icon: WithImagePollIcon
  },
  {
    value: PRESET_TYPE.GRID,
    label: "Poll_Presets_Popup_Option_ImagesGrid",
    icon: GridPollIcon
  }
];
export {
  InsertModal
};
//# sourceMappingURL=insert-modal.js.map
