/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const {
  CSSFilterEditorWidget,
} = require("resource://devtools/client/shared/widgets/FilterWidget.js");
const SwatchBasedEditorTooltip = require("resource://devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js");

const XHTML_NS = "http://www.w3.org/1999/xhtml";

/**
 * The swatch-based css filter tooltip class is a specific class meant to be
 * used along with rule-view's generated css filter swatches.
 * It extends the parent SwatchBasedEditorTooltip class.
 * It just wraps a standard Tooltip and sets its content with an instance of a
 * CSSFilterEditorWidget.
 *
 * @param {Document} document
 *        The document to attach the SwatchFilterTooltip. This is either the toolbox
 *        document if the tooltip is a popup tooltip or the panel's document if it is an
 *        inline editor.
 */

class SwatchFilterTooltip extends SwatchBasedEditorTooltip {
  constructor(document) {
    super(document);

    // Creating a filter editor instance.
    this.widget = this.setFilterContent("none");
    this._onUpdate = this._onUpdate.bind(this);
  }

  /**
   * Fill the tooltip with a new instance of the CSSFilterEditorWidget
   * widget initialized with the given filter value, and return a promise
   * that resolves to the instance of the widget when ready.
   */

  setFilterContent(filter) {
    const { doc } = this.tooltip;
    this.tooltip.panel.innerHTML = "";

    const container = doc.createElementNS(XHTML_NS, "div");
    container.id = "filter-container";

    this.tooltip.panel.appendChild(container);
    this.tooltip.setContentSize({ width: 510, height: 200 });

    return new CSSFilterEditorWidget(container, filter);
  }

  async show() {
    // Call the parent class' show function
    await super.show();
    // Then set the filter value and listen to changes to preview them
    if (this.activeSwatch) {
      this.currentFilterValue = this.activeSwatch.nextSibling;
      this.widget.off("updated", this._onUpdate);
      this.widget.on("updated", this._onUpdate);
      this.widget.setCssValue(this.currentFilterValue.textContent);
      this.widget.render();
      this.emit("ready");
    }
  }

  _onUpdate(filters) {
    if (!this.activeSwatch) {
      return;
    }

    // Reparse the property value to update the UI
    const node = this._parser.parseCssProperty(
      "filter",
      filters,
      this._options
    );
    this.currentFilterValue.replaceChildren(node);

    this.preview();
  }

  destroy() {
    super.destroy();
    this.currentFilterValue = null;
    this.widget.off("updated", this._onUpdate);
    this.widget.destroy();
  }

  /**
   * Like SwatchBasedEditorTooltip.addSwatch, but accepts a parser object
   * to use when previewing the updated property value.
   *
   * @param {node} swatchEl
   *        @see SwatchBasedEditorTooltip.addSwatch
   * @param {object} callbacks
   *        @see SwatchBasedEditorTooltip.addSwatch
   * @param {object} parser
   *        A parser object; @see OutputParser object
   * @param {object} options
   *        options to pass to the output parser, with
   *          the option |filterSwatch| set.
   * @param {node|undefined} previousSwatchEl
   *        @see SwatchBasedEditorTooltip.addSwatch
   */
  addSwatch(swatchEl, callbacks, parser, options, previousSwatchEl) {
    super.addSwatch(swatchEl, callbacks, previousSwatchEl);
    this._parser = parser;
    this._options = options;

    // If we are updating an already rendered and visible swatch,
    // update the current filter value DOM reference to the new DOM element.
    if (
      previousSwatchEl &&
      this.currentFilterValue == previousSwatchEl.nextSibling
    ) {
      this.currentFilterValue = swatchEl.nextSibling;
    }
  }
}

module.exports = SwatchFilterTooltip;
