/**
 * Generated by a build script. Do not modify.
 * Check orginal .jsx file.
 */
/* eslint-disable */

((wp2, Drupal2, DrupalGutenberg2, $) => {
  const { components, element, editor } = wp2;
  const { Component, Fragment, createPortal } = element;
  const { MediaBrowserDetails } = DrupalGutenberg2.Components;
  const { Button, FormFileUpload } = components;
  const { mediaUpload } = editor;
  function ModalActions({ element: el, children }) {
    if (!el.current) {
      return /* @__PURE__ */ React.createElement(Fragment, null, children);
    }
    const pane = el.current.parentNode.parentNode.querySelector(
      ".ui-dialog-buttonpane"
    );
    pane.querySelector(".ui-dialog-buttonset").innerHTML = "";
    return createPortal(children, pane);
  }
  class MediaBrowser extends Component {
    constructor(args) {
      super(args);
      this.state = {
        data: [],
        selected: {},
        active: null,
        search: ""
      };
      this.uploadFromFiles = this.uploadFromFiles.bind(this);
      this.addFiles = this.addFiles.bind(this);
      this.selectMedia = this.selectMedia.bind(this);
      this.toggleMedia = this.toggleMedia.bind(this);
      this.uncheckMedia = this.uncheckMedia.bind(this);
      this.wrapper = element.createRef();
    }
    componentWillMount() {
      this.getMediaFiles();
    }
    componentDidMount() {
      const { multiple, value } = this.props;
      let selected = {};
      if (multiple && value) {
        selected = {
          ...value.reduce((result, item) => {
            result[item] = true;
            return result;
          }, {})
        };
      } else if (value && value.length > 0) {
        selected = { [value]: true };
      }
      this.setState({
        selected,
        active: Object.keys(selected)[0]
      });
    }
    getMediaFiles() {
      const { allowedTypes } = this.props;
      if (allowedTypes.length === 0) {
        allowedTypes.push("*");
      }
      const search = allowedTypes.join("+");
      fetch(Drupal2.url(`editor/media/search/${search}/*`)).then((response) => response.json()).then((json) => {
        this.setState({ data: json });
      });
    }
    uploadFromFiles(event) {
      this.addFiles(event.target.files);
    }
    addFiles(files) {
      const { allowedTypes } = this.props;
      mediaUpload({
        allowedTypes,
        filesList: files,
        onFileChange: () => {
          this.getMediaFiles();
        }
      });
    }
    /**
     * Retrieves the Gutenberg CSRF token.
     */
    getCsrfToken() {
      return drupalSettings.gutenberg.csrfToken;
    }
    async selectMedia() {
      const { selected, data } = this.state;
      const { onSelect } = this.props;
      const medias = data.filter((item) => selected[item.id]);
      const csrfToken = this.getCsrfToken();
      medias.map(async (media) => {
        const title = typeof media.title === "string" ? media.title : "";
        const caption = typeof media.caption === "string" ? media.caption : "";
        const { alt_text } = media;
        await fetch(Drupal2.url(`editor/media/update_data/${media.id}`), {
          method: "post",
          headers: {
            "X-CSRF-Token": csrfToken
          },
          body: JSON.stringify({
            title,
            caption,
            alt_text
          })
        });
      });
      onSelect(medias);
    }
    toggleMedia(ev, id) {
      const { selected, active } = this.state;
      const { multiple } = this.props;
      this.setState({ active: id });
      if (multiple) {
        this.setState({
          selected: { ...selected, [id]: active === id ? !selected[id] : true }
        });
      } else {
        this.setState({
          selected: { [id]: active === id ? !selected[id] : true }
        });
      }
    }
    uncheckMedia(ev, id) {
      const { selected } = this.state;
      const { multiple } = this.props;
      if (multiple) {
        this.setState({
          selected: { ...selected, [id]: false }
        });
      }
      ev.stopPropagation();
    }
    render() {
      const { data, selected, active, search } = this.state;
      const { multiple } = this.props;
      const getMedia = (id) => data.filter((item) => item.id === id)[0];
      const activeMedia = getMedia(active);
      function updateMedia(attributes) {
        const { title, altText, caption } = attributes;
        activeMedia.title = title;
        if (caption) {
          activeMedia.caption = caption;
        }
        activeMedia.alt_text = altText;
        activeMedia.alt = altText;
      }
      return /* @__PURE__ */ React.createElement("div", { ref: this.wrapper, className: "media-browser" }, /* @__PURE__ */ React.createElement("div", { className: "content" }, /* @__PURE__ */ React.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React.createElement("div", { className: "form-item" }, /* @__PURE__ */ React.createElement(
        "input",
        {
          name: "media-browser-search",
          className: "text-full",
          placeholder: Drupal2.t("Search"),
          type: "text",
          onChange: (value) => {
            this.setState({ search: value.target.value.toLowerCase() });
          }
        }
      ))), /* @__PURE__ */ React.createElement("ul", { className: "list" }, data.filter(
        (item) => item.media_details.file.toLowerCase().includes(search) || typeof item.title === "string" && item.title.toLowerCase().includes(search) || typeof item.caption === "string" && item.caption.toLowerCase().includes(search) || typeof item.alt === "string" && item.alt.toLowerCase().includes(search)
      ).map((media, index) => (
        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
        /* @__PURE__ */ React.createElement(
          "li",
          {
            tabIndex: index,
            role: "checkbox",
            onClick: (ev) => this.toggleMedia(ev, media.id),
            "aria-label": media.filename,
            "aria-checked": "true",
            "data-id": media.id,
            className: `attachment save-ready ${active === media.id ? "details" : ""} ${selected[media.id] ? "selected" : ""}`
          },
          /* @__PURE__ */ React.createElement(
            "div",
            {
              className: [
                "attachment-preview",
                "js--select-attachment",
                `type-${media.media_type}`,
                `subtype-${media.mime_type.split("/")[1]}`,
                media.media_details.width < media.media_details.height ? "portrait" : "landscape"
              ].join(" ")
            },
            /* @__PURE__ */ React.createElement("div", { className: "thumbnail" }, /* @__PURE__ */ React.createElement("div", { className: "centered" }, media.media_type === "image" && /* @__PURE__ */ React.createElement(
              "img",
              {
                src: media.media_details.sizes && media.media_details.sizes.large ? media.media_details.sizes.large.source_url : media.source_url,
                draggable: "false",
                alt: media.filename
              }
            )), media.media_type !== "image" && /* @__PURE__ */ React.createElement("div", { className: "filename" }, media.media_details.file))
          ),
          /* @__PURE__ */ React.createElement(
            "button",
            {
              type: "button",
              className: "check",
              tabIndex: index,
              onClick: (ev) => this.uncheckMedia(ev, media.id)
            },
            /* @__PURE__ */ React.createElement("span", { className: "media-modal-icon" }),
            /* @__PURE__ */ React.createElement("span", { className: "screen-reader-text" }, "Deselect")
          )
        )
      ))), /* @__PURE__ */ React.createElement("div", { className: "media-details" }, activeMedia && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("h2", null, Drupal2.t("Media details")), /* @__PURE__ */ React.createElement(
        MediaBrowserDetails,
        {
          key: activeMedia.id,
          onChange: updateMedia,
          media: activeMedia
        }
      )))), /* @__PURE__ */ React.createElement(ModalActions, { element: this.wrapper }, /* @__PURE__ */ React.createElement("div", { className: "form-actions" }, multiple && /* @__PURE__ */ React.createElement("div", { className: "selected-summary" }, `${Drupal2.t("Total selected")}: ${Object.values(selected).filter((item) => item).length}`), /* @__PURE__ */ React.createElement("div", { className: "buttons" }, /* @__PURE__ */ React.createElement(
        FormFileUpload,
        {
          isLarge: true,
          className: "editor-media-placeholder__button",
          onChange: this.uploadFromFiles,
          accept: "image",
          multiple
        },
        Drupal2.t("Upload")
      ), /* @__PURE__ */ React.createElement(
        Button,
        {
          isLarge: true,
          disabled: Object.values(selected).filter((item) => item).length === 0 || !selected,
          isPrimary: true,
          onClick: this.selectMedia
        },
        Drupal2.t("Select")
      )))));
    }
  }
  MediaBrowser.defaultProps = {
    allowedTypes: ["image"]
  };
  window.DrupalGutenberg = window.DrupalGutenberg || {};
  window.DrupalGutenberg.Components = window.DrupalGutenberg.Components || {};
  window.DrupalGutenberg.Components.MediaBrowser = MediaBrowser;
})(wp, Drupal, DrupalGutenberg, jQuery);
