// packages/block-editor/src/hooks/block-fields/media/index.js
import {
  Button,
  Icon as WCIcon,
  __experimentalGrid as Grid
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { focus } from "@wordpress/dom";
import { useRef } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import {
  audio as audioIcon,
  image as imageIcon,
  media as mediaIcon,
  video as videoIcon,
  reset as resetIcon
} from "@wordpress/icons";
import MediaReplaceFlow from "../../../components/media-replace-flow/index.mjs";
import MediaUploadCheck from "../../../components/media-upload/check.mjs";
import { useInspectorPopoverPlacement } from "../use-inspector-popover-placement.mjs";
import { getMediaSelectKey } from "../../../store/private-keys.mjs";
import { store as blockEditorStore } from "../../../store/index.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var focusToggleButton = (containerRef) => {
  window.requestAnimationFrame(() => {
    const [toggleButton] = focus.tabbable.find(containerRef?.current);
    if (!toggleButton) {
      return;
    }
    toggleButton.focus();
  });
};
function MediaThumbnail({ data, field, attachment, config }) {
  const { allowedTypes = [], multiple = false } = config || {};
  if (multiple) {
    return "todo multiple";
  }
  if (attachment?.media_type === "image" || attachment?.poster) {
    return /* @__PURE__ */ jsx("div", { className: "block-editor-content-only-controls__media-thumbnail", children: /* @__PURE__ */ jsx(
      "img",
      {
        alt: "",
        width: 20,
        height: 20,
        src: attachment.media_type === "image" ? attachment.source_url : attachment.poster
      }
    ) });
  }
  if (allowedTypes.length === 1) {
    const value = field.getValue({ item: data });
    const url = value?.url;
    if (allowedTypes[0] === "image" && url) {
      return /* @__PURE__ */ jsx("div", { className: "block-editor-content-only-controls__media-thumbnail", children: /* @__PURE__ */ jsx("img", { alt: "", width: 20, height: 20, src: url }) });
    }
    let icon;
    if (allowedTypes[0] === "image") {
      icon = imageIcon;
    } else if (allowedTypes[0] === "video") {
      icon = videoIcon;
    } else if (allowedTypes[0] === "audio") {
      icon = audioIcon;
    } else {
      icon = mediaIcon;
    }
    if (icon) {
      return /* @__PURE__ */ jsx(WCIcon, { icon, size: 20 });
    }
  }
  return /* @__PURE__ */ jsx(WCIcon, { icon: mediaIcon, size: 20 });
}
function Media({ data, field, onChange, config = {} }) {
  const { popoverProps } = useInspectorPopoverPlacement({
    isControl: true
  });
  const value = field.getValue({ item: data });
  const {
    allowedTypes = [],
    multiple = false,
    useFeaturedImage = false
  } = config;
  const id = value?.id;
  const url = value?.url;
  const attachment = useSelect(
    (select) => {
      if (!id) {
        return;
      }
      const settings = select(blockEditorStore).getSettings();
      const getMedia = settings[getMediaSelectKey];
      if (!getMedia) {
        return;
      }
      return getMedia(select, id);
    },
    [id]
  );
  let chooseItemLabel;
  if (allowedTypes.length === 1) {
    const allowedType = allowedTypes[0];
    if (allowedType === "image") {
      chooseItemLabel = __("Image");
    } else if (allowedType === "video") {
      chooseItemLabel = __("Video");
    } else if (allowedType === "application") {
      chooseItemLabel = __("File");
    } else {
      chooseItemLabel = __("Media");
    }
  } else {
    chooseItemLabel = __("Media");
  }
  const containerRef = useRef();
  return /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsxs(
    "div",
    {
      ref: containerRef,
      className: "block-editor-content-only-controls",
      children: [
        /* @__PURE__ */ jsx(
          MediaReplaceFlow,
          {
            className: "block-editor-content-only-controls__media-replace-flow",
            allowedTypes,
            mediaId: id,
            mediaURL: url,
            multiple,
            popoverProps,
            onReset: () => {
              onChange(
                field.setValue({
                  item: data,
                  value: {}
                })
              );
            },
            ...useFeaturedImage && {
              useFeaturedImage: !!value?.featuredImage,
              onToggleFeaturedImage: () => {
                onChange(
                  field.setValue({
                    item: data,
                    value: {
                      featuredImage: !value?.featuredImage
                    }
                  })
                );
              }
            },
            onSelect: (selectedMedia) => {
              if (selectedMedia.id && selectedMedia.url) {
                const newValue = {
                  ...selectedMedia,
                  mediaType: selectedMedia.media_type
                };
                if (useFeaturedImage) {
                  newValue.featuredImage = false;
                }
                onChange(
                  field.setValue({
                    item: data,
                    value: newValue
                  })
                );
              }
            },
            renderToggle: (buttonProps) => /* @__PURE__ */ jsx(
              Button,
              {
                __next40pxDefaultSize: true,
                className: "block-editor-content-only-controls__media",
                ...buttonProps,
                children: /* @__PURE__ */ jsxs(
                  Grid,
                  {
                    rowGap: 0,
                    columnGap: 8,
                    templateColumns: "20px 1fr",
                    className: "block-editor-content-only-controls__media-row",
                    children: [
                      url && /* @__PURE__ */ jsxs(Fragment, { children: [
                        /* @__PURE__ */ jsx(
                          MediaThumbnail,
                          {
                            attachment,
                            field,
                            data,
                            config
                          }
                        ),
                        /* @__PURE__ */ jsx("span", {
                          className: "block-editor-content-only-controls__media-title",
                          // TODO - truncate long titles or url smartly (e.g. show filename).
                          children: attachment?.title?.raw && attachment?.title?.raw !== "" ? attachment?.title?.raw : url
                        })
                      ] }),
                      !url && /* @__PURE__ */ jsxs(Fragment, { children: [
                        /* @__PURE__ */ jsx(
                          "span",
                          {
                            className: "block-editor-content-only-controls__media-placeholder",
                            style: {
                              width: "20px",
                              height: "20px"
                            }
                          }
                        ),
                        /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
                      ] })
                    ]
                  }
                )
              }
            )
          }
        ),
        url && /* @__PURE__ */ jsx(
          Button,
          {
            label: __("Reset"),
            className: "block-editor-content-only-controls__media-reset",
            size: "small",
            icon: resetIcon,
            onClick: () => {
              onChange(
                field.setValue({
                  item: data,
                  value: {}
                })
              );
              focusToggleButton(containerRef);
            }
          }
        )
      ]
    }
  ) });
}
export {
  Media as default
};
//# sourceMappingURL=index.mjs.map
