import { ListItemSection } from "@wix/design-system";
import { EditSparklesSmall, ImageSparklesSmall } from "@wix/wix-ui-icons-common";
import React, { useContext } from "react";
import { EditorContext, ModalServiceContext, RicosContext } from "./../../ricos-context/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";
import { unreachable } from "./../../_shared/uncreachable.js";
import {
  AI_FLOW_ITEM_CONTENT,
  AI_FLOW_ITEM_IMAGE,
  AI_FLOW_SELECTION_POPOVER
} from "../data-hooks.js";
import { AI_FLOW_SELECTION_MODAL_ID } from "../types.js";
const AiFlowSelectionModal = ({
  toggleAiContentModal,
  toggleAiImageModal,
  config
}) => {
  const { t } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext);
  const { adapter } = useContext(EditorContext);
  const closeModal = React.useCallback(() => {
    modalService.closeModal(AI_FLOW_SELECTION_MODAL_ID);
  }, [modalService]);
  const openAiContentModal = React.useCallback(
    (initialPrompt) => {
      toggleAiContentModal(adapter.tiptapEditor, modalService, initialPrompt);
    },
    [adapter.tiptapEditor, modalService]
  );
  const defaultFlowSelectionItems = React.useMemo(
    () => [
      {
        type: "action",
        title: t("AIPlugin_Flow_ContentAssistant"),
        icon: EditSparklesSmall,
        onClick: () => toggleAiContentModal(adapter.tiptapEditor, modalService),
        dataHook: AI_FLOW_ITEM_CONTENT
      },
      {
        type: "action",
        title: t("AIPlugin_Flow_ImageGenerator"),
        icon: ImageSparklesSmall,
        onClick: () => toggleAiImageModal(adapter.tiptapEditor, modalService),
        dataHook: AI_FLOW_ITEM_IMAGE
      }
    ],
    [toggleAiContentModal, toggleAiImageModal, t]
  );
  const [flowSelectionItems] = React.useState(
    () => config.configureFlowSelectionItems ? config.configureFlowSelectionItems(defaultFlowSelectionItems) : defaultFlowSelectionItems
  );
  const options = React.useMemo(() => {
    return flowSelectionItems.map((item, index) => {
      switch (item.type) {
        case "prompt": {
          const Icon = item.icon;
          return /* @__PURE__ */ React.createElement(
            ListItemSelect,
            {
              key: item.title,
              dataHook: item.title,
              prefix: Icon ? /* @__PURE__ */ React.createElement(Icon, null) : void 0,
              title: item.title,
              onSelect: () => openAiContentModal(item)
            }
          );
        }
        case "action": {
          const Icon = item.icon;
          return /* @__PURE__ */ React.createElement(
            ListItemSelect,
            {
              key: item.title,
              dataHook: "dataHook" in item ? item.dataHook : item.title,
              prefix: Icon ? /* @__PURE__ */ React.createElement(Icon, null) : void 0,
              title: item.title,
              onSelect: item.onClick
            }
          );
        }
        case "section": {
          return /* @__PURE__ */ React.createElement(ListItemSection, { key: item.title, title: t(item.title) });
        }
        case "divider": {
          return /* @__PURE__ */ React.createElement(ListItemDivider, { key: `divider-${index}` });
        }
        default: {
          throw unreachable(item);
        }
      }
    });
  }, [flowSelectionItems, openAiContentModal, t]);
  return /* @__PURE__ */ React.createElement(
    DropdownModal,
    {
      dataHook: AI_FLOW_SELECTION_POPOVER,
      title: t("AIPlugin_Flow_Title"),
      onCloseButtonClick: closeModal,
      minWidth: 206,
      maxHeight: 242,
      options
    }
  );
};
export {
  AiFlowSelectionModal
};
//# sourceMappingURL=ai-flow-selection-modal.js.map
