import { Avatar, Image as ImageBase, listItemSelectBuilder } from "@wix/design-system";
import React, { useContext, useMemo } from "react";
import {
  ContentQueryContext,
  getAnchorableNodesQuery,
  isAnchorableNode
} from "./../../../../ricos-content-query/index.js";
import { getText } from "./../../../../ricos-content/lib/content-application.js";
import { EditorContext, RicosContext } from "./../../../../ricos-context/index.js";
import { Node_Type } from "./../../../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { unreachable } from "./../../../uncreachable.js";
import { getImageSrc } from "./../../../../wix-rich-content-common/lib/image-utils.js";
import { ShapeViewRenderer } from "./../../../../plugin-shape/viewer/viewer-shape.js";
import { containsUrl } from "../../../link/contains-url.js";
import { sectionTypeKeys } from "../../section-type-keys.js";
import { BlockQuoteIcon } from "./icons/block-quote-icon.js";
import { ButtonIcon } from "./icons/button-icon.js";
import { CodeBlockIcon } from "./icons/code-block-icon.js";
import { FileIcon } from "./icons/file-icon.js";
import { GalleryIcon } from "./icons/gallery-icon.js";
import { GiphyIcon } from "./icons/giphy-icon.js";
import { H1Icon } from "./icons/h1-icon.js";
import { H2Icon } from "./icons/h2-icon.js";
import { H3Icon } from "./icons/h3-icon.js";
import { H4Icon } from "./icons/h4-icon.js";
import { H5Icon } from "./icons/h5-icon.js";
import { H6Icon } from "./icons/h6-icon.js";
import { ImageIcon } from "./icons/image-icon.js";
import { ParagraphIcon } from "./icons/paragraph-icon.js";
import { VideoIcon } from "./icons/video-icon.js";
const headingIcons = {
  1: /* @__PURE__ */ React.createElement(H1Icon, null),
  2: /* @__PURE__ */ React.createElement(H2Icon, null),
  3: /* @__PURE__ */ React.createElement(H3Icon, null),
  4: /* @__PURE__ */ React.createElement(H4Icon, null),
  5: /* @__PURE__ */ React.createElement(H5Icon, null),
  6: /* @__PURE__ */ React.createElement(H6Icon, null)
};
const getPrefix = (node) => {
  switch (node.type) {
    case Node_Type.BLOCKQUOTE:
      return /* @__PURE__ */ React.createElement(BlockQuoteIcon, null);
    case Node_Type.BUTTON:
      return /* @__PURE__ */ React.createElement(ButtonIcon, null);
    case Node_Type.CODE_BLOCK:
      return /* @__PURE__ */ React.createElement(CodeBlockIcon, null);
    case Node_Type.FILE:
      return /* @__PURE__ */ React.createElement(FileIcon, null);
    case Node_Type.GALLERY: {
      const item = node.galleryData?.items[0];
      const src = item && item.video ? item?.video?.thumbnail?.src?.url : item?.image?.media?.src?.id ?? item?.image?.media?.src?.url;
      return src ? /* @__PURE__ */ React.createElement(ImagePreview, { src }) : /* @__PURE__ */ React.createElement(GalleryIcon, null);
    }
    case Node_Type.GIF: {
      const src = node.gifData?.downsized?.still;
      return src ? /* @__PURE__ */ React.createElement(ImagePreview, { src }) : /* @__PURE__ */ React.createElement(GiphyIcon, null);
    }
    case Node_Type.HEADING:
      return headingIcons[node.headingData?.level || 0];
    case Node_Type.IMAGE: {
      const src = node.imageData?.image?.src?.url ?? node.imageData?.image?.src?.id;
      return src ? /* @__PURE__ */ React.createElement(ImagePreview, { src }) : /* @__PURE__ */ React.createElement(ImageIcon, null);
    }
    case Node_Type.PARAGRAPH:
      return /* @__PURE__ */ React.createElement(ParagraphIcon, null);
    case Node_Type.VIDEO: {
      const src = node.videoData?.thumbnail?.src?.url ?? node.videoData?.thumbnail?.src?.id;
      return src ? /* @__PURE__ */ React.createElement(ImagePreview, { src }) : /* @__PURE__ */ React.createElement(VideoIcon, null);
    }
    case Node_Type.SHAPE: {
      const shapeData = node.shapeData;
      return /* @__PURE__ */ React.createElement(
        ShapePreview,
        {
          shapeSrc: shapeData?.shape?.src,
          color: shapeData?.styles?.color
        }
      );
    }
    default:
      unreachable(node.type);
  }
};
const getTitle = (node, nodeIndex, t) => {
  switch (node.type) {
    case Node_Type.BLOCKQUOTE:
      return node.nodes[0].nodes[0].textData?.text;
    case Node_Type.BUTTON:
      return node.buttonData?.text;
    case Node_Type.CODE_BLOCK:
      return node.nodes[0].textData?.text;
    case Node_Type.FILE:
      return node.fileData?.name || `${t("LinkTo_Modal_Section_Item_File")} ${nodeIndex}`;
    case Node_Type.GALLERY:
      return `${t("LinkTo_Modal_Section_Item_Gallery")} ${nodeIndex}`;
    case Node_Type.GIF:
      return `${t("LinkTo_Modal_Section_Item_GIF")} ${nodeIndex}`;
    case Node_Type.HEADING:
      return getText(node).join("");
    case Node_Type.IMAGE:
      return `${t("LinkTo_Modal_Section_Item_Image")} ${nodeIndex}`;
    case Node_Type.PARAGRAPH:
      return getText(node).join("");
    case Node_Type.VIDEO:
      return `${t("LinkTo_Modal_Section_Item_Video")} ${nodeIndex}`;
    case Node_Type.SHAPE:
      return `${t("LinkTo_Modal_Section_Item_Shape")} ${nodeIndex}`;
    default:
      unreachable(node.type);
  }
};
const useSectionOptions = () => {
  const contentQueryService = useContext(ContentQueryContext);
  const { getPublicCommands } = useContext(EditorContext);
  const { t } = useContext(RicosContext);
  const selection = getPublicCommands().getSelection();
  const anchorableNodes = useMemo(() => {
    if (!contentQueryService) {
      return [];
    }
    const selectedNodeIds = selection.selectedNodes.map((node) => node.attrs.id);
    return getAnchorableNodesQuery(contentQueryService.getContentExtractor(), selection.startKey).filter(isAnchorableNode).filter(
      (node) => selectedNodeIds.includes(node.id) ? false : node.type === Node_Type.BLOCKQUOTE ? node.nodes[0].nodes[0].textData?.text !== void 0 : true
    );
  }, [contentQueryService, selection.endKey, selection.startKey]);
  return useMemo(() => {
    const counters = {
      [Node_Type.PARAGRAPH]: 0,
      [Node_Type.HEADING]: 0,
      [Node_Type.CODE_BLOCK]: 0,
      [Node_Type.BLOCKQUOTE]: 0,
      [Node_Type.IMAGE]: 0,
      [Node_Type.GALLERY]: 0,
      [Node_Type.VIDEO]: 0,
      [Node_Type.BUTTON]: 0,
      [Node_Type.GIF]: 0,
      [Node_Type.FILE]: 0,
      [Node_Type.SHAPE]: 0
    };
    const sections = anchorableNodes.map((node) => {
      counters[node.type] += 1;
      const prefix = getPrefix(node);
      const title = getTitle(node, counters[node.type], t) || "";
      return {
        id: node.id,
        node,
        prefix,
        prefixAvatar: /* @__PURE__ */ React.createElement(Avatar, { shape: "square", size: "size30", placeholder: prefix }),
        subtitle: t(sectionTypeKeys[node.type]),
        title
      };
    }).filter((section) => !!section.title);
    const allLabel = t("LinkTo_Modal_Section_Filter_All");
    const sectionTypeOptions = [
      {
        ...listItemSelectBuilder({
          id: "all",
          label: allLabel,
          size: "small",
          title: allLabel
        }),
        label: allLabel
      },
      ...Object.entries(counters).filter(([_, count]) => count).map(([nodeType]) => {
        const label = t(sectionTypeKeys[nodeType]);
        return {
          ...listItemSelectBuilder({
            id: nodeType,
            label,
            size: "small",
            title: label
          }),
          label
        };
      })
    ];
    return { sections, sectionTypeOptions };
  }, [anchorableNodes]);
};
const ImagePreview = ({ src }) => {
  const imageSrc = getImageSrc(
    containsUrl(src) ? src : {
      file_name: src,
      id: src,
      width: 48,
      height: 48
    },
    void 0,
    {
      requiredWidth: 48,
      requiredHeight: 48,
      requiredQuality: 80,
      imageType: "highRes"
    }
  );
  return /* @__PURE__ */ React.createElement(ImageBase, { fit: "contain", src: imageSrc, borderRadius: 0 });
};
const ShapePreview = ({ shapeSrc, color }) => {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      style: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 4,
        width: 30,
        height: 30,
        fill: color
      }
    },
    /* @__PURE__ */ React.createElement(ShapeViewRenderer, { shapeSrc })
  );
};
export {
  useSectionOptions
};
//# sourceMappingURL=use-options.js.map
