import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import {
  Disabled,
  Composite,
  privateApis as componentsPrivateApis
} from "@wordpress/components";
import { __, _x, sprintf } from "@wordpress/i18n";
import {
  BlockList,
  privateApis as blockEditorPrivateApis,
  store as blockEditorStore,
  useSettings,
  BlockEditorProvider,
  __unstableEditorStyles as EditorStyles,
  __unstableIframe as Iframe,
  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
} from "@wordpress/block-editor";
import { privateApis as editorPrivateApis } from "@wordpress/editor";
import { useSelect, dispatch } from "@wordpress/data";
import {
  useMemo,
  useState,
  memo,
  useContext,
  useRef,
  useLayoutEffect,
  useEffect
} from "@wordpress/element";
import { ENTER, SPACE } from "@wordpress/keycodes";
import { uploadMedia } from "@wordpress/media-utils";
import { store as coreStore } from "@wordpress/core-data";
import { unlock } from "../../lock-unlock";
import EditorCanvasContainer from "../editor-canvas-container";
import { STYLE_BOOK_IFRAME_STYLES } from "./constants";
import {
  getExamplesByCategory,
  getTopLevelStyleBookCategories
} from "./categories";
import { getExamples } from "./examples";
import { store as siteEditorStore } from "../../store";
import { useSection } from "../sidebar-global-styles-wrapper";
import { GlobalStylesRenderer } from "../global-styles-renderer";
import { getVariationClassName } from "../global-styles/utils";
import {
  STYLE_BOOK_COLOR_GROUPS,
  STYLE_BOOK_PREVIEW_CATEGORIES
} from "../style-book/constants";
const {
  ExperimentalBlockEditorProvider,
  useGlobalStyle,
  GlobalStylesContext,
  useGlobalStylesOutputWithConfig
} = unlock(blockEditorPrivateApis);
const { mergeBaseAndUserConfigs } = unlock(editorPrivateApis);
const { Tabs } = unlock(componentsPrivateApis);
function isObjectEmpty(object) {
  return !object || Object.keys(object).length === 0;
}
const scrollToSection = (anchorId, iframe) => {
  if (!anchorId || !iframe || !iframe?.contentDocument) {
    return;
  }
  const element = anchorId === "top" ? iframe.contentDocument.body : iframe.contentDocument.getElementById(anchorId);
  if (element) {
    element.scrollIntoView({
      behavior: "smooth"
    });
  }
};
const getStyleBookNavigationFromPath = (path) => {
  if (path && typeof path === "string") {
    if (path === "/" || path.startsWith("/typography") || path.startsWith("/colors") || path.startsWith("/blocks")) {
      return {
        top: true
      };
    }
  }
  return null;
};
function useMultiOriginPalettes() {
  const { colors, gradients } = useMultipleOriginColorsAndGradients();
  const [
    shouldDisplayDefaultDuotones,
    customDuotones,
    themeDuotones,
    defaultDuotones
  ] = useSettings(
    "color.defaultDuotone",
    "color.duotone.custom",
    "color.duotone.theme",
    "color.duotone.default"
  );
  const palettes = useMemo(() => {
    const result = { colors, gradients, duotones: [] };
    if (themeDuotones && themeDuotones.length) {
      result.duotones.push({
        name: _x(
          "Theme",
          "Indicates these duotone filters come from the theme."
        ),
        slug: "theme",
        duotones: themeDuotones
      });
    }
    if (shouldDisplayDefaultDuotones && defaultDuotones && defaultDuotones.length) {
      result.duotones.push({
        name: _x(
          "Default",
          "Indicates these duotone filters come from WordPress."
        ),
        slug: "default",
        duotones: defaultDuotones
      });
    }
    if (customDuotones && customDuotones.length) {
      result.duotones.push({
        name: _x(
          "Custom",
          "Indicates these doutone filters are created by the user."
        ),
        slug: "custom",
        duotones: customDuotones
      });
    }
    return result;
  }, [
    colors,
    gradients,
    customDuotones,
    themeDuotones,
    defaultDuotones,
    shouldDisplayDefaultDuotones
  ]);
  return palettes;
}
function getExamplesForSinglePageUse(examples) {
  const examplesForSinglePageUse = [];
  const overviewCategoryExamples = getExamplesByCategory(
    { slug: "overview" },
    examples
  );
  examplesForSinglePageUse.push(...overviewCategoryExamples.examples);
  const otherExamples = examples.filter((example) => {
    return example.category !== "overview" && !overviewCategoryExamples.examples.find(
      (overviewExample) => overviewExample.name === example.name
    );
  });
  examplesForSinglePageUse.push(...otherExamples);
  return examplesForSinglePageUse;
}
function applyBlockVariationsToExamples(examples, variation) {
  if (!variation) {
    return examples;
  }
  return examples.map((example) => ({
    ...example,
    variation,
    blocks: {
      ...example.blocks,
      attributes: {
        ...example.blocks.attributes,
        style: void 0,
        className: getVariationClassName(variation)
      }
    }
  }));
}
function StyleBook({
  enableResizing = true,
  isSelected,
  onClick,
  onSelect,
  showCloseButton = true,
  onClose,
  showTabs = true,
  userConfig = {},
  path = ""
}) {
  const [textColor] = useGlobalStyle("color.text");
  const [backgroundColor] = useGlobalStyle("color.background");
  const colors = useMultiOriginPalettes();
  const examples = useMemo(() => getExamples(colors), [colors]);
  const tabs = useMemo(
    () => getTopLevelStyleBookCategories().filter(
      (category) => examples.some(
        (example) => example.category === category.slug
      )
    ),
    [examples]
  );
  const examplesForSinglePageUse = getExamplesForSinglePageUse(examples);
  const { base: baseConfig } = useContext(GlobalStylesContext);
  const goTo = getStyleBookNavigationFromPath(path);
  const mergedConfig = useMemo(() => {
    if (!isObjectEmpty(userConfig) && !isObjectEmpty(baseConfig)) {
      return mergeBaseAndUserConfigs(baseConfig, userConfig);
    }
    return {};
  }, [baseConfig, userConfig]);
  const originalSettings = useSelect(
    (select) => select(blockEditorStore).getSettings(),
    []
  );
  const [globalStyles] = useGlobalStylesOutputWithConfig(mergedConfig);
  const settings = useMemo(
    () => ({
      ...originalSettings,
      styles: !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : originalSettings.styles,
      isPreviewMode: true
    }),
    [globalStyles, originalSettings, userConfig]
  );
  return /* @__PURE__ */ jsx(
    EditorCanvasContainer,
    {
      onClose,
      enableResizing,
      closeButtonLabel: showCloseButton ? __("Close") : null,
      children: /* @__PURE__ */ jsx(
        "div",
        {
          className: clsx("edit-site-style-book", {
            "is-button": !!onClick
          }),
          style: {
            color: textColor,
            background: backgroundColor
          },
          children: showTabs ? /* @__PURE__ */ jsxs(Tabs, { children: [
            /* @__PURE__ */ jsx("div", { className: "edit-site-style-book__tablist-container", children: /* @__PURE__ */ jsx(Tabs.TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
              Tabs.Tab,
              {
                tabId: tab.slug,
                children: tab.title
              },
              tab.slug
            )) }) }),
            tabs.map((tab) => {
              const categoryDefinition = tab.slug ? getTopLevelStyleBookCategories().find(
                (_category) => _category.slug === tab.slug
              ) : null;
              const filteredExamples = categoryDefinition ? getExamplesByCategory(
                categoryDefinition,
                examples
              ) : { examples };
              return /* @__PURE__ */ jsx(
                Tabs.TabPanel,
                {
                  tabId: tab.slug,
                  focusable: false,
                  className: "edit-site-style-book__tabpanel",
                  children: /* @__PURE__ */ jsx(
                    StyleBookBody,
                    {
                      category: tab.slug,
                      examples: filteredExamples,
                      isSelected,
                      onSelect,
                      settings,
                      title: tab.title,
                      goTo
                    }
                  )
                },
                tab.slug
              );
            })
          ] }) : /* @__PURE__ */ jsx(
            StyleBookBody,
            {
              examples: { examples: examplesForSinglePageUse },
              isSelected,
              onClick,
              onSelect,
              settings,
              goTo
            }
          )
        }
      )
    }
  );
}
const StyleBookPreview = ({ userConfig = {}, isStatic = false }) => {
  const siteEditorSettings = useSelect(
    (select) => select(siteEditorStore).getSettings(),
    []
  );
  const canUserUploadMedia = useSelect(
    (select) => select(coreStore).canUser("create", {
      kind: "postType",
      name: "attachment"
    }),
    []
  );
  useEffect(() => {
    dispatch(blockEditorStore).updateSettings({
      ...siteEditorSettings,
      mediaUpload: canUserUploadMedia ? uploadMedia : void 0
    });
  }, [siteEditorSettings, canUserUploadMedia]);
  const [section, onChangeSection] = useSection();
  const isSelected = (blockName) => {
    return section === `/blocks/${encodeURIComponent(blockName)}` || section.startsWith(
      `/blocks/${encodeURIComponent(blockName)}/`
    );
  };
  const onSelect = (blockName, isBlockVariation = false) => {
    if (STYLE_BOOK_COLOR_GROUPS.find(
      (group) => group.slug === blockName
    )) {
      onChangeSection("/colors/palette");
      return;
    }
    if (blockName === "typography") {
      onChangeSection("/typography");
      return;
    }
    if (isBlockVariation) {
      return;
    }
    onChangeSection(`/blocks/${encodeURIComponent(blockName)}`);
  };
  const colors = useMultiOriginPalettes();
  const examples = getExamples(colors);
  const examplesForSinglePageUse = getExamplesForSinglePageUse(examples);
  let previewCategory = null;
  let blockVariation = null;
  if (section.includes("/colors")) {
    previewCategory = "colors";
  } else if (section.includes("/typography")) {
    previewCategory = "text";
  } else if (section.includes("/blocks")) {
    previewCategory = "blocks";
    let blockName = decodeURIComponent(section).split("/blocks/")[1];
    if (blockName?.includes("/variations")) {
      [blockName, blockVariation] = blockName.split("/variations/");
    }
    if (blockName && examples.find((example) => example.name === blockName)) {
      previewCategory = blockName;
    }
  } else if (!isStatic) {
    previewCategory = "overview";
  }
  const categoryDefinition = STYLE_BOOK_PREVIEW_CATEGORIES.find(
    (category) => category.slug === previewCategory
  );
  const filteredExamples = useMemo(() => {
    if (!categoryDefinition) {
      return {
        examples: [
          examples.find(
            (example) => example.name === previewCategory
          )
        ]
      };
    }
    return getExamplesByCategory(categoryDefinition, examples);
  }, [categoryDefinition, examples, previewCategory]);
  const displayedExamples = useMemo(() => {
    if (!previewCategory) {
      return { examples: examplesForSinglePageUse };
    }
    if (blockVariation) {
      return {
        examples: applyBlockVariationsToExamples(
          filteredExamples.examples,
          blockVariation
        )
      };
    }
    return filteredExamples;
  }, [
    previewCategory,
    examplesForSinglePageUse,
    blockVariation,
    filteredExamples
  ]);
  const { base: baseConfig } = useContext(GlobalStylesContext);
  const goTo = getStyleBookNavigationFromPath(section);
  const mergedConfig = useMemo(() => {
    if (!isObjectEmpty(userConfig) && !isObjectEmpty(baseConfig)) {
      return mergeBaseAndUserConfigs(baseConfig, userConfig);
    }
    return {};
  }, [baseConfig, userConfig]);
  const [globalStyles] = useGlobalStylesOutputWithConfig(mergedConfig);
  const settings = useMemo(
    () => ({
      ...siteEditorSettings,
      styles: !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : siteEditorSettings.styles,
      isPreviewMode: true
    }),
    [globalStyles, siteEditorSettings, userConfig]
  );
  return /* @__PURE__ */ jsx("div", { className: "edit-site-style-book", children: /* @__PURE__ */ jsxs(BlockEditorProvider, { settings, children: [
    /* @__PURE__ */ jsx(GlobalStylesRenderer, { disableRootPadding: true }),
    /* @__PURE__ */ jsx(
      StyleBookBody,
      {
        examples: displayedExamples,
        settings,
        goTo,
        isSelected: !isStatic ? isSelected : null,
        onSelect: !isStatic ? onSelect : null
      }
    )
  ] }) });
};
const StyleBookBody = ({
  examples,
  isSelected,
  onClick,
  onSelect,
  settings,
  title,
  goTo
}) => {
  const [isFocused, setIsFocused] = useState(false);
  const [hasIframeLoaded, setHasIframeLoaded] = useState(false);
  const iframeRef = useRef(null);
  const buttonModeProps = {
    role: "button",
    onFocus: () => setIsFocused(true),
    onBlur: () => setIsFocused(false),
    onKeyDown: (event) => {
      if (event.defaultPrevented) {
        return;
      }
      const { keyCode } = event;
      if (onClick && (keyCode === ENTER || keyCode === SPACE)) {
        event.preventDefault();
        onClick(event);
      }
    },
    onClick: (event) => {
      if (event.defaultPrevented) {
        return;
      }
      if (onClick) {
        event.preventDefault();
        onClick(event);
      }
    },
    readonly: true
  };
  const handleLoad = () => setHasIframeLoaded(true);
  useLayoutEffect(() => {
    if (hasIframeLoaded && iframeRef?.current) {
      if (goTo?.top) {
        scrollToSection("top", iframeRef?.current);
      }
    }
  }, [iframeRef?.current, goTo, scrollToSection, hasIframeLoaded]);
  return /* @__PURE__ */ jsxs(
    Iframe,
    {
      onLoad: handleLoad,
      ref: iframeRef,
      className: clsx("edit-site-style-book__iframe", {
        "is-focused": isFocused && !!onClick,
        "is-button": !!onClick
      }),
      name: "style-book-canvas",
      tabIndex: 0,
      ...onClick ? buttonModeProps : {},
      children: [
        /* @__PURE__ */ jsx(EditorStyles, { styles: settings.styles }),
        /* @__PURE__ */ jsxs("style", { children: [
          STYLE_BOOK_IFRAME_STYLES,
          !!onClick && "body { cursor: pointer; } body * { pointer-events: none; }"
        ] }),
        /* @__PURE__ */ jsx(
          Examples,
          {
            className: "edit-site-style-book__examples",
            filteredExamples: examples,
            label: title ? sprintf(
              // translators: %s: Category of blocks, e.g. Text.
              __("Examples of blocks in the %s category"),
              title
            ) : __("Examples of blocks"),
            isSelected,
            onSelect
          },
          title
        )
      ]
    }
  );
};
const Examples = memo(
  ({ className, filteredExamples, label, isSelected, onSelect }) => {
    return /* @__PURE__ */ jsxs(
      Composite,
      {
        orientation: "vertical",
        className,
        "aria-label": label,
        role: "grid",
        children: [
          !!filteredExamples?.examples?.length && filteredExamples.examples.map((example) => /* @__PURE__ */ jsx(
            Example,
            {
              id: `example-${example.name}`,
              title: example.title,
              content: example.content,
              blocks: example.blocks,
              isSelected: isSelected?.(example.name),
              onClick: !!onSelect ? () => onSelect(
                example.name,
                !!example.variation
              ) : null
            },
            example.name
          )),
          !!filteredExamples?.subcategories?.length && filteredExamples.subcategories.map((subcategory) => /* @__PURE__ */ jsxs(
            Composite.Group,
            {
              className: "edit-site-style-book__subcategory",
              children: [
                /* @__PURE__ */ jsx(Composite.GroupLabel, { children: /* @__PURE__ */ jsx("h2", { className: "edit-site-style-book__subcategory-title", children: subcategory.title }) }),
                /* @__PURE__ */ jsx(
                  Subcategory,
                  {
                    examples: subcategory.examples,
                    isSelected,
                    onSelect
                  }
                )
              ]
            },
            `subcategory-${subcategory.slug}`
          ))
        ]
      }
    );
  }
);
const Subcategory = ({ examples, isSelected, onSelect }) => {
  return !!examples?.length && examples.map((example) => /* @__PURE__ */ jsx(
    Example,
    {
      id: `example-${example.name}`,
      title: example.title,
      content: example.content,
      blocks: example.blocks,
      isSelected: isSelected?.(example.name),
      onClick: !!onSelect ? () => onSelect(example.name) : null
    },
    example.name
  ));
};
const disabledExamples = ["example-duotones"];
const Example = ({ id, title, blocks, isSelected, onClick, content }) => {
  const originalSettings = useSelect(
    (select) => select(blockEditorStore).getSettings(),
    []
  );
  const settings = useMemo(
    () => ({
      ...originalSettings,
      focusMode: false,
      // Disable "Spotlight mode".
      isPreviewMode: true
    }),
    [originalSettings]
  );
  const renderedBlocks = useMemo(
    () => Array.isArray(blocks) ? blocks : [blocks],
    [blocks]
  );
  const disabledProps = disabledExamples.includes(id) || !onClick ? {
    disabled: true,
    accessibleWhenDisabled: !!onClick
  } : {};
  return /* @__PURE__ */ jsx("div", { role: "row", children: /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsxs(
    Composite.Item,
    {
      className: clsx("edit-site-style-book__example", {
        "is-selected": isSelected,
        "is-disabled-example": !!disabledProps?.disabled
      }),
      id,
      "aria-label": !!onClick ? sprintf(
        // translators: %s: Title of a block, e.g. Heading.
        __("Open %s styles in Styles panel"),
        title
      ) : void 0,
      render: /* @__PURE__ */ jsx("div", {}),
      role: !!onClick ? "button" : null,
      onClick,
      ...disabledProps,
      children: [
        /* @__PURE__ */ jsx("span", { className: "edit-site-style-book__example-title", children: title }),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: "edit-site-style-book__example-preview",
            "aria-hidden": true,
            children: /* @__PURE__ */ jsx(Disabled, { className: "edit-site-style-book__example-preview__content", children: content ? content : /* @__PURE__ */ jsxs(
              ExperimentalBlockEditorProvider,
              {
                value: renderedBlocks,
                settings,
                children: [
                  /* @__PURE__ */ jsx(EditorStyles, {}),
                  /* @__PURE__ */ jsx(BlockList, { renderAppender: false })
                ]
              }
            ) })
          }
        )
      ]
    }
  ) }) });
};
var style_book_default = StyleBook;
export {
  StyleBookBody,
  StyleBookPreview,
  style_book_default as default,
  getExamplesForSinglePageUse
};
//# sourceMappingURL=index.js.map
