/**
 * Modal Gallery Plugin for Editor.js
 * Allows inserting images by opening a modal gallery
 */
export class GalleryPlugin {
  static get toolbox() {
    return {
      title: "Gallery Image",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
  <rect width="14" height="14" x="5" y="5" stroke="currentColor" stroke-width="2" rx="4" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M5.13968 15.32L8.69058 11.5661C9.02934 11.2036 9.48873 11 9.96774 11C10.4467 11 10.9061 11.2036 11.2449 11.5661L15.3871 16" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M13.5806 14.0664L15.0132 12.533C15.3519 12.1705 15.8113 11.9668 16.2903 11.9668C16.7693 11.9668 17.2287 12.1705 17.5675 12.533L18.841 13.9634" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M13.7778 9.33331H13.7867" />
</svg>`,
    };
  }

  static get isReadOnlySupported() {
    return true;
  }

  constructor({ data, api, config, readOnly }) {
    this.api = api;
    this.readOnly = readOnly;
    this.config = config || {};

    this.data = {
      url: data.url || "",
      file: {
        url: data.url || "",
      },
      caption: data.caption || "",
      withBorder: data.withBorder !== undefined ? data.withBorder : false,
      withBackground:
        data.withBackground !== undefined ? data.withBackground : false,
      stretched: data.stretched !== undefined ? data.stretched : false,
    };

    this.wrapper = null;
    this.imageHolder = null;
  }

  render() {
    this.wrapper = document.createElement("div");
    // this.wrapper.classList.add("modal-gallery-plugin");
    this.wrapper.classList.add(
      "cdx-block",
      "image-tool",
      "image-tool--caption",
      "image-tool--filled"
    );

    if (this.data.url) {
      this._createImage(this.data.url, this.data.caption);
    } else {
      this._createUploadButton();
    }

    return this.wrapper;
  }

  _createUploadButton() {
    const button = document.createElement("div");
    button.classList.add("modal-gallery-plugin__button");
    button.innerHTML = `
      <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M18 8C18 9.10457 17.1046 10 16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8Z" fill="#1C274C"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0574 1.25H11.9426C9.63424 1.24999 7.82519 1.24998 6.41371 1.43975C4.96897 1.63399 3.82895 2.03933 2.93414 2.93414C2.03933 3.82895 1.63399 4.96897 1.43975 6.41371C1.24998 7.82519 1.24999 9.63422 1.25 11.9426V12.0574C1.24999 14.3658 1.24998 16.1748 1.43975 17.5863C1.63399 19.031 2.03933 20.1711 2.93414 21.0659C3.82895 21.9607 4.96897 22.366 6.41371 22.5603C7.82519 22.75 9.63423 22.75 11.9426 22.75H12.0574C14.3658 22.75 16.1748 22.75 17.5863 22.5603C19.031 22.366 20.1711 21.9607 21.0659 21.0659C21.9607 20.1711 22.366 19.031 22.5603 17.5863C22.75 16.1748 22.75 14.3658 22.75 12.0574V11.9426C22.75 9.63423 22.75 7.82519 22.5603 6.41371C22.366 4.96897 21.9607 3.82895 21.0659 2.93414C20.1711 2.03933 19.031 1.63399 17.5863 1.43975C16.1748 1.24998 14.3658 1.24999 12.0574 1.25ZM3.9948 3.9948C4.56445 3.42514 5.33517 3.09825 6.61358 2.92637C7.91356 2.75159 9.62178 2.75 12 2.75C14.3782 2.75 16.0864 2.75159 17.3864 2.92637C18.6648 3.09825 19.4355 3.42514 20.0052 3.9948C20.5749 4.56445 20.9018 5.33517 21.0736 6.61358C21.2484 7.91356 21.25 9.62178 21.25 12C21.25 12.4502 21.2499 12.8764 21.2487 13.2804L21.0266 13.2497C18.1828 12.8559 15.5805 14.3343 14.2554 16.5626C12.5459 12.2376 8.02844 9.28807 2.98073 10.0129L2.75497 10.0454C2.76633 8.63992 2.80368 7.52616 2.92637 6.61358C3.09825 5.33517 3.42514 4.56445 3.9948 3.9948Z" fill="#1C274C"></path> </g></svg>
      <span>Select image from gallery</span>
    `;

    button.addEventListener("click", () => {
      this._openModal();
    });

    this.wrapper.innerHTML = "";
    this.wrapper.appendChild(button);
  }

  _openModal() {
    // Call the modal function provided in config
    if (this.config.openModal && typeof this.config.openModal === "function") {
      this.config.openModal((selectedImage) => {
        if (selectedImage) {
          this.data.file.url = selectedImage.url;
          this.data.url = selectedImage.url;
          this.data.caption = selectedImage.caption || "";
          this._createImage(selectedImage.url, selectedImage.caption);
        }
      });
    } else {
      console.error("Modal gallery function not provided in config");
    }
  }

  _createImage(url, caption) {
    this.wrapper.innerHTML = "";

    const container = document.createElement("div");
    container.classList.add("image-tool__image", "image-tool__relatived");

    // preloader
    const preloader = document.createElement("div");
    preloader.classList.add("image-tool__image-preloader");
    container.appendChild(preloader);

    // image
    const imageTag = document.createElement("img");
    imageTag.classList.add("image-tool__image-picture");
    imageTag.src = url;
    container.appendChild(imageTag);

    //  caption
    const captionElement = document.createElement("div");
    captionElement.classList.add("cdx-input", "image-tool__caption");
    captionElement.contentEditable = !this.readOnly;
    captionElement.innerHTML = caption || "";
    captionElement.dataset.placeholder = "Caption";

    if (!this.readOnly) {
      const changeButton = document.createElement("button");
      changeButton.classList.add("modal-gallery-plugin__change");
      changeButton.innerHTML = "Change image";
      changeButton.addEventListener("click", () => {
        this._openModal();
      });
      container.appendChild(changeButton);
    }

    this.wrapper.appendChild(container);
    this.wrapper.appendChild(captionElement);
  }

  save() {
    return this.data;
  }

  renderSettings() {
    const wrapper = document.createElement("div");

    this.settings = [
      {
        name: "withBorder",
        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.9919 9.5H19.0015" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.5 5H14.5096" />
  <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M14.625 5H15C17.2091 5 19 6.79086 19 9V9.375" />
  <path stroke="currentColor" stroke-width="2" d="M9.375 5L9 5C6.79086 5 5 6.79086 5 9V9.375" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.3725 5H9.38207" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 9.5H5.00957" />
  <path stroke="currentColor" stroke-width="2" d="M9.375 19H9C6.79086 19 5 17.2091 5 15V14.625" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.3725 19H9.38207" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14.55H5.00957" />
  <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 13V16M16 19V16M19 16H16M16 16H13" />
</svg>
`,
        title: "With border",
      },
      {
        name: "stretched",
        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9L20 12L17 15" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 12H20" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 9L4 12L7 15" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12H10" />
</svg>
`,
        title: "Stretch image",
      },
      {
        name: "withBackground",
        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M11 19V19C9.13623 19 8.20435 19 7.46927 18.6955C6.48915 18.2895 5.71046 17.5108 5.30448 16.5307C5 15.7956 5 14.8638 5 13V12C5 9.19108 5 7.78661 5.67412 6.77772C5.96596 6.34096 6.34096 5.96596 6.77772 5.67412C7.78661 5 9.19108 5 12 5H13.5C14.8956 5 15.5933 5 16.1611 5.17224C17.4395 5.56004 18.44 6.56046 18.8278 7.83886C19 8.40666 19 9.10444 19 10.5" />
  <path stroke="currentColor" stroke-linecap="round" stroke-width="2"
    d="M16 13V16M16 19V16M19 16H16M16 16H13" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M6.5 17.5L17.5 6.5" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M18.9919 10.5H19.0015" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M10.9919 19H11.0015" />
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M5 13L13 5" />
</svg>
`,
        title: "With background",
      },
    ];

    this.settings.forEach((tune) => {
      const button = document.createElement("div");
      button.classList.add("ce-popover-item");
      button.classList.toggle("ce-popover-item--active", this.data[tune.name]);

      // icon
      const iconcontainer = document.createElement("div");
      iconcontainer.classList.add(
        "ce-popover-item__icon",
        "ce-popover-item__icon--tool"
      );
      iconcontainer.innerHTML = tune.icon;
      button.appendChild(iconcontainer);

      // title
      const title = document.createElement("div");
      title.classList.add("ce-popover-item__title");
      title.innerHTML = tune.title;
      button.appendChild(title);

      button.addEventListener("click", () => {
        this._toggleTune(tune.name);
        button.classList.toggle("ce-popover-item--active");
      });

      wrapper.appendChild(button);
    });

    return wrapper;
  }

  _toggleTune(tune) {
    this.data[tune] = !this.data[tune];

    if (this.wrapper) {
      const container = this.wrapper;

      if (tune === "withBorder") {
        container.classList.toggle("image-tool--withBorder");
      }
      if (tune === "withBackground") {
        container.classList.toggle("image-tool--withBackground");
      }
      if (tune === "stretched") {
        container.classList.toggle("image-tool--stretched");
      }
    }
  }

  validate(savedData) {
    return savedData.url && savedData.url.trim() !== "";
  }
}
