"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-library/src/utils/poster-image.js
var poster_image_exports = {};
__export(poster_image_exports, {
  default: () => poster_image_default
});
module.exports = __toCommonJS(poster_image_exports);
var import_clsx = __toESM(require("clsx"));
var import_block_editor = require("@wordpress/block-editor");
var import_notices = require("@wordpress/notices");
var import_components = require("@wordpress/components");
var import_blob = require("@wordpress/blob");
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_data = require("@wordpress/data");
var import_jsx_runtime = require("react/jsx-runtime");
var POSTER_IMAGE_ALLOWED_MEDIA_TYPES = ["image"];
function PosterImage({ poster, onChange }) {
  const posterButtonRef = (0, import_element.useRef)();
  const [isLoading, setIsLoading] = (0, import_element.useState)(false);
  const descriptionId = (0, import_compose.useInstanceId)(
    PosterImage,
    "block-library-poster-image-description"
  );
  const { getSettings } = (0, import_data.useSelect)(import_block_editor.store);
  const { createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
  const onDropFiles = (filesList) => {
    getSettings().mediaUpload({
      allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
      filesList,
      onFileChange: ([image]) => {
        if ((0, import_blob.isBlobURL)(image?.url)) {
          setIsLoading(true);
          return;
        }
        if (image) {
          onChange(image);
        }
        setIsLoading(false);
      },
      onError: (message) => {
        createErrorNotice(message, {
          id: "poster-image-upload-notice",
          type: "snackbar"
        });
        setIsLoading(false);
      },
      multiple: false
    });
  };
  const getPosterButtonContent = () => {
    if (!poster && isLoading) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {});
    }
    return !poster ? (0, import_i18n.__)("Set poster image") : (0, import_i18n.__)("Replace");
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.MediaUploadCheck, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.__experimentalToolsPanelItem,
    {
      label: (0, import_i18n.__)("Poster image"),
      isShownByDefault: true,
      hasValue: () => !!poster,
      onDeselect: () => onChange(void 0),
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { children: (0, import_i18n.__)("Poster image") }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_block_editor.MediaUpload,
          {
            title: (0, import_i18n.__)("Select poster image"),
            onSelect: onChange,
            allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
            render: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-library-poster-image__container", children: [
              poster && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                import_components.Button,
                {
                  __next40pxDefaultSize: true,
                  onClick: open,
                  "aria-haspopup": "dialog",
                  "aria-label": (0, import_i18n.__)(
                    "Edit or replace the poster image."
                  ),
                  className: "block-library-poster-image__preview",
                  disabled: isLoading,
                  accessibleWhenDisabled: true,
                  children: [
                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                      "img",
                      {
                        src: poster,
                        alt: (0, import_i18n.__)("Poster image preview"),
                        className: "block-library-poster-image__preview-image"
                      }
                    ),
                    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
                  ]
                }
              ),
              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                import_components.__experimentalHStack,
                {
                  className: (0, import_clsx.default)(
                    "block-library-poster-image__actions",
                    {
                      "block-library-poster-image__actions-select": !poster
                    }
                  ),
                  children: [
                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                      import_components.Button,
                      {
                        __next40pxDefaultSize: true,
                        onClick: open,
                        ref: posterButtonRef,
                        className: "block-library-poster-image__action",
                        "aria-describedby": descriptionId,
                        "aria-haspopup": "dialog",
                        variant: !poster ? "secondary" : void 0,
                        disabled: isLoading,
                        accessibleWhenDisabled: true,
                        children: getPosterButtonContent()
                      }
                    ),
                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: descriptionId, hidden: true, children: poster ? (0, import_i18n.sprintf)(
                      /* translators: %s: poster image URL. */
                      (0, import_i18n.__)(
                        "The current poster image url is %s."
                      ),
                      poster
                    ) : (0, import_i18n.__)(
                      "There is no poster image currently selected."
                    ) }),
                    !!poster && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                      import_components.Button,
                      {
                        __next40pxDefaultSize: true,
                        onClick: () => {
                          onChange(void 0);
                          posterButtonRef.current.focus();
                        },
                        className: "block-library-poster-image__action",
                        disabled: isLoading,
                        accessibleWhenDisabled: true,
                        children: (0, import_i18n.__)("Remove")
                      }
                    )
                  ]
                }
              ),
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.DropZone, { onFilesDrop: onDropFiles })
            ] })
          }
        )
      ]
    }
  ) });
}
var poster_image_default = PosterImage;
//# sourceMappingURL=poster-image.js.map
