"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/block-pattern-setup/index.js
var block_pattern_setup_exports = {};
__export(block_pattern_setup_exports, {
  default: () => block_pattern_setup_default
});
module.exports = __toCommonJS(block_pattern_setup_exports);
var import_data = require("@wordpress/data");
var import_blocks = require("@wordpress/blocks");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_i18n = require("@wordpress/i18n");
var import_store = require("../../store");
var import_block_preview = __toESM(require("../block-preview"));
var import_setup_toolbar = __toESM(require("./setup-toolbar"));
var import_use_patterns_setup = __toESM(require("./use-patterns-setup"));
var import_constants = require("./constants");
var import_jsx_runtime = require("react/jsx-runtime");
var SetupContent = ({
  viewMode,
  activeSlide,
  patterns,
  onBlockPatternSelect,
  showTitles
}) => {
  const containerClass = "block-editor-block-pattern-setup__container";
  if (viewMode === import_constants.VIEWMODES.carousel) {
    const slideClass = /* @__PURE__ */ new Map([
      [activeSlide, "active-slide"],
      [activeSlide - 1, "previous-slide"],
      [activeSlide + 1, "next-slide"]
    ]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-block-pattern-setup__carousel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: containerClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "carousel-container", children: patterns.map((pattern, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      BlockPatternSlide,
      {
        active: index === activeSlide,
        className: slideClass.get(index) || "",
        pattern
      },
      pattern.name
    )) }) }) });
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-block-pattern-setup__grid", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.Composite,
    {
      role: "listbox",
      className: containerClass,
      "aria-label": (0, import_i18n.__)("Patterns list"),
      children: patterns.map((pattern) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        BlockPattern,
        {
          pattern,
          onSelect: onBlockPatternSelect,
          showTitles
        },
        pattern.name
      ))
    }
  ) });
};
function BlockPattern({ pattern, onSelect, showTitles }) {
  const baseClassName = "block-editor-block-pattern-setup-list";
  const { blocks, description, viewportWidth = 700 } = pattern;
  const descriptionId = (0, import_compose.useInstanceId)(
    BlockPattern,
    `${baseClassName}__item-description`
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${baseClassName}__list-item`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.Composite.Item,
    {
      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "div",
        {
          "aria-describedby": description ? descriptionId : void 0,
          "aria-label": pattern.title,
          className: `${baseClassName}__item`
        }
      ),
      id: `${baseClassName}__pattern__${pattern.name}`,
      role: "option",
      onClick: () => onSelect(blocks),
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_block_preview.default,
          {
            blocks,
            viewportWidth
          }
        ),
        showTitles && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${baseClassName}__item-title`, children: pattern.title }),
        !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { id: descriptionId, children: description })
      ]
    }
  ) });
}
function BlockPatternSlide({ active, className, pattern, minHeight }) {
  const { blocks, title, description } = pattern;
  const descriptionId = (0, import_compose.useInstanceId)(
    BlockPatternSlide,
    "block-editor-block-pattern-setup-list__item-description"
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      "aria-hidden": !active,
      role: "img",
      className: `pattern-slide ${className}`,
      "aria-label": title,
      "aria-describedby": description ? descriptionId : void 0,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_preview.default, { blocks, minHeight }),
        !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { id: descriptionId, children: description })
      ]
    }
  );
}
var BlockPatternSetup = ({
  clientId,
  blockName,
  filterPatternsFn,
  onBlockPatternSelect,
  initialViewMode = import_constants.VIEWMODES.carousel,
  showTitles = false
}) => {
  const [viewMode, setViewMode] = (0, import_element.useState)(initialViewMode);
  const [activeSlide, setActiveSlide] = (0, import_element.useState)(0);
  const { replaceBlock } = (0, import_data.useDispatch)(import_store.store);
  const patterns = (0, import_use_patterns_setup.default)(clientId, blockName, filterPatternsFn);
  if (!patterns?.length) {
    return null;
  }
  const onBlockPatternSelectDefault = (blocks) => {
    const clonedBlocks = blocks.map((block) => (0, import_blocks.cloneBlock)(block));
    replaceBlock(clientId, clonedBlocks);
  };
  const onPatternSelectCallback = onBlockPatternSelect || onBlockPatternSelectDefault;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      className: `block-editor-block-pattern-setup view-mode-${viewMode}`,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          SetupContent,
          {
            viewMode,
            activeSlide,
            patterns,
            onBlockPatternSelect: onPatternSelectCallback,
            showTitles
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_setup_toolbar.default,
          {
            viewMode,
            setViewMode,
            activeSlide,
            totalSlides: patterns.length,
            handleNext: () => {
              setActiveSlide(
                (active) => Math.min(active + 1, patterns.length - 1)
              );
            },
            handlePrevious: () => {
              setActiveSlide(
                (active) => Math.max(active - 1, 0)
              );
            },
            onBlockPatternSelect: () => {
              onPatternSelectCallback(
                patterns[activeSlide].blocks
              );
            }
          }
        )
      ]
    }
  ) });
};
var block_pattern_setup_default = BlockPatternSetup;
//# sourceMappingURL=index.js.map
