/* 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";

/**
 * This is a CSS Filter Editor widget used
 * for Rule View's filter swatches
 */

const EventEmitter = require("resource://devtools/shared/event-emitter.js");
const XHTML_NS = "http://www.w3.org/1999/xhtml";

const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
const STRINGS_URI = "devtools/client/locales/filterwidget.properties";
const L10N = new LocalizationHelper(STRINGS_URI);

const {
  cssTokenizer,
} = require("resource://devtools/shared/css/parsing-utils.js");

const asyncStorage = require("resource://devtools/shared/async-storage.js");

const DEFAULT_FILTER_TYPE = "length";
const UNIT_MAPPING = {
  percentage: "%",
  length: "px",
  angle: "deg",
  string: "",
};

const FAST_VALUE_MULTIPLIER = 10;
const SLOW_VALUE_MULTIPLIER = 0.1;
const DEFAULT_VALUE_MULTIPLIER = 1;

const LIST_PADDING = 7;
const LIST_ITEM_HEIGHT = 32;

const filterList = [
  {
    name: "blur",
    range: [0, Infinity],
    type: "length",
  },
  {
    name: "brightness",
    range: [0, Infinity],
    type: "percentage",
  },
  {
    name: "contrast",
    range: [0, Infinity],
    type: "percentage",
  },
  {
    name: "drop-shadow",
    placeholder: L10N.getStr("dropShadowPlaceholder"),
    type: "string",
  },
  {
    name: "grayscale",
    range: [0, 100],
    type: "percentage",
  },
  {
    name: "hue-rotate",
    range: [0, Infinity],
    type: "angle",
  },
  {
    name: "invert",
    range: [0, 100],
    type: "percentage",
  },
  {
    name: "opacity",
    range: [0, 100],
    type: "percentage",
  },
  {
    name: "saturate",
    range: [0, Infinity],
    type: "percentage",
  },
  {
    name: "sepia",
    range: [0, 100],
    type: "percentage",
  },
  {
    name: "url",
    placeholder: "example.svg#c1",
    type: "string",
  },
];

// Valid values that shouldn't be parsed for filters.
const SPECIAL_VALUES = new Set([
  "none",
  ...InspectorUtils.getCSSWideKeywords(),
]);

/**
 * A CSS Filter editor widget used to add/remove/modify
 * filters.
 *
 * Normally, it takes a CSS filter value as input, parses it
 * and creates the required elements / bindings.
 *
 * You can, however, use add/remove/update methods manually.
 * See each method's comments for more details
 */
class CSSFilterEditorWidget extends EventEmitter {
  /**
   * @param {Node} el
   *        The widget container.
   * @param {string} value
   *        CSS filter value
   */
  constructor(el, value = "") {
    super();

    this.doc = el.ownerDocument;
    this.win = this.doc.defaultView;
    this.el = el;
    this._cssIsValid = (name, val) => {
      return this.win.CSS.supports(name, val);
    };

    this._addButtonClick = this._addButtonClick.bind(this);
    this._removeButtonClick = this._removeButtonClick.bind(this);
    this._mouseMove = this._mouseMove.bind(this);
    this._mouseUp = this._mouseUp.bind(this);
    this._mouseDown = this._mouseDown.bind(this);
    this._keyDown = this._keyDown.bind(this);
    this._input = this._input.bind(this);
    this._presetClick = this._presetClick.bind(this);
    this._savePreset = this._savePreset.bind(this);
    this._togglePresets = this._togglePresets.bind(this);
    this._resetFocus = this._resetFocus.bind(this);

    // Passed to asyncStorage, requires binding
    this.renderPresets = this.renderPresets.bind(this);

    this._initMarkup();
    this._buildFilterItemMarkup();
    this._buildPresetItemMarkup();
    this._addEventListeners();

    this.filters = [];
    this.setCssValue(value);
    this.renderPresets();
  }

  _initMarkup() {
    // The following structure is created:
    //   <div class="filters-list">
    //     <div id="filters"></div>
    //     <div class="footer">
    //       <select value="">
    //         <option value="">${filterListSelectPlaceholder}</option>
    //       </select>
    //       <button id="add-filter" class="add">${addNewFilterButton}</button>
    //       <button id="toggle-presets">${presetsToggleButton}</button>
    //     </div>
    //   </div>
    //   <div class="presets-list">
    //     <div id="presets"></div>
    //     <div class="footer">
    //       <input value="" class="devtools-textinput"
    //              placeholder="${newPresetPlaceholder}"></input>
    //       <button class="add">${savePresetButton}</button>
    //     </div>
    //   </div>
    const content = this.doc.createDocumentFragment();

    const filterListWrapper = this.doc.createElementNS(XHTML_NS, "div");
    filterListWrapper.classList.add("filters-list");
    content.appendChild(filterListWrapper);

    this.filterList = this.doc.createElementNS(XHTML_NS, "div");
    this.filterList.setAttribute("id", "filters");
    filterListWrapper.appendChild(this.filterList);

    const filterListFooter = this.doc.createElementNS(XHTML_NS, "div");
    filterListFooter.classList.add("footer");
    filterListWrapper.appendChild(filterListFooter);

    this.filterSelect = this.doc.createElementNS(XHTML_NS, "select");
    this.filterSelect.setAttribute("value", "");
    filterListFooter.appendChild(this.filterSelect);

    const filterListPlaceholder = this.doc.createElementNS(XHTML_NS, "option");
    filterListPlaceholder.setAttribute("value", "");
    filterListPlaceholder.textContent = L10N.getStr(
      "filterListSelectPlaceholder"
    );
    this.filterSelect.appendChild(filterListPlaceholder);

    const addFilter = this.doc.createElementNS(XHTML_NS, "button");
    addFilter.setAttribute("id", "add-filter");
    addFilter.classList.add("add");
    addFilter.textContent = L10N.getStr("addNewFilterButton");
    filterListFooter.appendChild(addFilter);

    this.togglePresets = this.doc.createElementNS(XHTML_NS, "button");
    this.togglePresets.setAttribute("id", "toggle-presets");
    this.togglePresets.textContent = L10N.getStr("presetsToggleButton");
    filterListFooter.appendChild(this.togglePresets);

    const presetListWrapper = this.doc.createElementNS(XHTML_NS, "div");
    presetListWrapper.classList.add("presets-list");
    content.appendChild(presetListWrapper);

    this.presetList = this.doc.createElementNS(XHTML_NS, "div");
    this.presetList.setAttribute("id", "presets");
    presetListWrapper.appendChild(this.presetList);

    const presetListFooter = this.doc.createElementNS(XHTML_NS, "div");
    presetListFooter.classList.add("footer");
    presetListWrapper.appendChild(presetListFooter);

    this.addPresetInput = this.doc.createElementNS(XHTML_NS, "input");
    this.addPresetInput.setAttribute("value", "");
    this.addPresetInput.classList.add("devtools-textinput");
    this.addPresetInput.setAttribute(
      "placeholder",
      L10N.getStr("newPresetPlaceholder")
    );
    presetListFooter.appendChild(this.addPresetInput);

    this.addPresetButton = this.doc.createElementNS(XHTML_NS, "button");
    this.addPresetButton.classList.add("add");
    this.addPresetButton.textContent = L10N.getStr("savePresetButton");
    presetListFooter.appendChild(this.addPresetButton);

    this.el.appendChild(content);

    this._populateFilterSelect();
  }

  _destroyMarkup() {
    this._filterItemMarkup.remove();
    this.el.remove();
    this.el = this.filterList = this._filterItemMarkup = null;
    this.presetList = this.togglePresets = this.filterSelect = null;
    this.addPresetButton = null;
  }

  destroy() {
    this._removeEventListeners();
    this._destroyMarkup();
  }

  /**
   * Creates <option> elements for each filter definition
   * in filterList
   */
  _populateFilterSelect() {
    const select = this.filterSelect;
    filterList.forEach(filter => {
      const option = this.doc.createElementNS(XHTML_NS, "option");
      option.textContent = option.value = filter.name;
      select.appendChild(option);
    });
  }

  /**
   * Creates a template for filter elements which is cloned and used in render
   */
  _buildFilterItemMarkup() {
    const base = this.doc.createElementNS(XHTML_NS, "div");
    base.className = "filter";

    const name = this.doc.createElementNS(XHTML_NS, "div");
    name.className = "filter-name";

    const value = this.doc.createElementNS(XHTML_NS, "div");
    value.className = "filter-value";

    const drag = this.doc.createElementNS(XHTML_NS, "i");
    drag.title = L10N.getStr("dragHandleTooltipText");

    const label = this.doc.createElementNS(XHTML_NS, "label");

    name.appendChild(drag);
    name.appendChild(label);

    const unitPreview = this.doc.createElementNS(XHTML_NS, "span");
    const input = this.doc.createElementNS(XHTML_NS, "input");
    input.classList.add("devtools-textinput");

    value.appendChild(input);
    value.appendChild(unitPreview);

    const removeButton = this.doc.createElementNS(XHTML_NS, "button");
    removeButton.className = "remove-button";

    base.appendChild(name);
    base.appendChild(value);
    base.appendChild(removeButton);

    this._filterItemMarkup = base;
  }

  _buildPresetItemMarkup() {
    const base = this.doc.createElementNS(XHTML_NS, "div");
    base.classList.add("preset");

    const name = this.doc.createElementNS(XHTML_NS, "label");
    base.appendChild(name);

    const value = this.doc.createElementNS(XHTML_NS, "span");
    base.appendChild(value);

    const removeButton = this.doc.createElementNS(XHTML_NS, "button");
    removeButton.classList.add("remove-button");

    base.appendChild(removeButton);

    this._presetItemMarkup = base;
  }

  _addEventListeners() {
    this.addButton = this.el.querySelector("#add-filter");
    this.addButton.addEventListener("click", this._addButtonClick);
    this.filterList.addEventListener("click", this._removeButtonClick);
    this.filterList.addEventListener("mousedown", this._mouseDown);
    this.filterList.addEventListener("keydown", this._keyDown);
    this.el.addEventListener("mousedown", this._resetFocus);

    this.presetList.addEventListener("click", this._presetClick);
    this.togglePresets.addEventListener("click", this._togglePresets);
    this.addPresetButton.addEventListener("click", this._savePreset);

    // These events are event delegators for
    // drag-drop re-ordering and label-dragging
    this.win.addEventListener("mousemove", this._mouseMove);
    this.win.addEventListener("mouseup", this._mouseUp);

    // Used to workaround float-precision problems
    this.filterList.addEventListener("input", this._input);
  }

  _removeEventListeners() {
    this.addButton.removeEventListener("click", this._addButtonClick);
    this.filterList.removeEventListener("click", this._removeButtonClick);
    this.filterList.removeEventListener("mousedown", this._mouseDown);
    this.filterList.removeEventListener("keydown", this._keyDown);
    this.el.removeEventListener("mousedown", this._resetFocus);

    this.presetList.removeEventListener("click", this._presetClick);
    this.togglePresets.removeEventListener("click", this._togglePresets);
    this.addPresetButton.removeEventListener("click", this._savePreset);

    // These events are used for drag drop re-ordering
    this.win.removeEventListener("mousemove", this._mouseMove);
    this.win.removeEventListener("mouseup", this._mouseUp);

    // Used to workaround float-precision problems
    this.filterList.removeEventListener("input", this._input);
  }

  _getFilterElementIndex(el) {
    return [...this.filterList.children].indexOf(el);
  }

  _keyDown(e) {
    if (
      e.target.tagName.toLowerCase() !== "input" ||
      (e.keyCode !== 40 && e.keyCode !== 38)
    ) {
      return;
    }
    const input = e.target;

    const direction = e.keyCode === 40 ? -1 : 1;

    let multiplier = DEFAULT_VALUE_MULTIPLIER;
    if (e.altKey) {
      multiplier = SLOW_VALUE_MULTIPLIER;
    } else if (e.shiftKey) {
      multiplier = FAST_VALUE_MULTIPLIER;
    }

    const filterEl = e.target.closest(".filter");
    const index = this._getFilterElementIndex(filterEl);
    const filter = this.filters[index];

    // Filters that have units are number-type filters. For them,
    // the value can be incremented/decremented simply.
    // For other types of filters (e.g. drop-shadow) we need to check
    // if the keydown happened close to a number first.
    if (filter.unit) {
      const startValue = parseFloat(e.target.value);
      let value = startValue + direction * multiplier;

      const [min, max] = this._definition(filter.name).range;
      if (value < min) {
        value = min;
      } else if (value > max) {
        value = max;
      }

      input.value = fixFloat(value);

      this.updateValueAt(index, value);
    } else {
      let selectionStart = input.selectionStart;
      const num = getNeighbourNumber(input.value, selectionStart);
      if (!num) {
        return;
      }

      let { start, end, value } = num;

      const split = input.value.split("");
      let computed = fixFloat(value + direction * multiplier);
      const dotIndex = computed.indexOf(".0");
      if (dotIndex > -1) {
        computed = computed.slice(0, -2);

        selectionStart =
          selectionStart > start + dotIndex ? start + dotIndex : selectionStart;
      }
      split.splice(start, end - start, computed);

      value = split.join("");
      input.value = value;
      this.updateValueAt(index, value);
      input.setSelectionRange(selectionStart, selectionStart);
    }
    e.preventDefault();
  }

  _input(e) {
    const filterEl = e.target.closest(".filter");
    const index = this._getFilterElementIndex(filterEl);
    const filter = this.filters[index];
    const def = this._definition(filter.name);

    if (def.type !== "string") {
      e.target.value = fixFloat(e.target.value);
    }
    this.updateValueAt(index, e.target.value);
  }

  _mouseDown(e) {
    const filterEl = e.target.closest(".filter");

    // re-ordering drag handle
    if (e.target.tagName.toLowerCase() === "i") {
      this.isReorderingFilter = true;
      filterEl.startingY = e.pageY;
      filterEl.classList.add("dragging");

      this.el.classList.add("dragging");
      // label-dragging
    } else if (e.target.classList.contains("devtools-draglabel")) {
      const label = e.target;
      const input = filterEl.querySelector("input");
      const index = this._getFilterElementIndex(filterEl);

      this._dragging = {
        index,
        label,
        input,
        startX: e.pageX,
      };

      this.isDraggingLabel = true;
    }
  }

  _addButtonClick() {
    const select = this.filterSelect;
    if (!select.value) {
      return;
    }

    const key = select.value;
    this.add(key, null);

    this.render();
  }

  _removeButtonClick(e) {
    const isRemoveButton = e.target.classList.contains("remove-button");
    if (!isRemoveButton) {
      return;
    }

    const filterEl = e.target.closest(".filter");
    const index = this._getFilterElementIndex(filterEl);
    this.removeAt(index);
  }

  _mouseMove(e) {
    if (this.isReorderingFilter) {
      this._dragFilterElement(e);
    } else if (this.isDraggingLabel) {
      this._dragLabel(e);
    }
  }

  _dragFilterElement(e) {
    const rect = this.filterList.getBoundingClientRect();
    const top = e.pageY - LIST_PADDING;
    const bottom = e.pageY + LIST_PADDING;
    // don't allow dragging over top/bottom of list
    if (top < rect.top || bottom > rect.bottom) {
      return;
    }

    const filterEl = this.filterList.querySelector(".dragging");

    const delta = e.pageY - filterEl.startingY;
    filterEl.style.top = delta + "px";

    // change is the number of _steps_ taken from initial position
    // i.e. how many elements we have passed
    let change = delta / LIST_ITEM_HEIGHT;
    if (change > 0) {
      change = Math.floor(change);
    } else if (change < 0) {
      change = Math.ceil(change);
    }

    const children = this.filterList.children;
    const index = [...children].indexOf(filterEl);
    const destination = index + change;

    // If we're moving out, or there's no change at all, stop and return
    if (destination >= children.length || destination < 0 || change === 0) {
      return;
    }

    // Re-order filter objects
    swapArrayIndices(this.filters, index, destination);

    // Re-order the dragging element in markup
    const target =
      change > 0 ? children[destination + 1] : children[destination];
    if (target) {
      this.filterList.insertBefore(filterEl, target);
    } else {
      this.filterList.appendChild(filterEl);
    }

    filterEl.removeAttribute("style");

    const currentPosition = change * LIST_ITEM_HEIGHT;
    filterEl.startingY = e.pageY + currentPosition - delta;
  }

  _dragLabel(e) {
    const dragging = this._dragging;

    const input = dragging.input;

    let multiplier = DEFAULT_VALUE_MULTIPLIER;

    if (e.altKey) {
      multiplier = SLOW_VALUE_MULTIPLIER;
    } else if (e.shiftKey) {
      multiplier = FAST_VALUE_MULTIPLIER;
    }

    dragging.lastX = e.pageX;
    const delta = e.pageX - dragging.startX;
    const startValue = parseFloat(input.value);
    let value = startValue + delta * multiplier;

    const filter = this.filters[dragging.index];
    const [min, max] = this._definition(filter.name).range;
    if (value < min) {
      value = min;
    } else if (value > max) {
      value = max;
    }

    input.value = fixFloat(value);

    dragging.startX = e.pageX;

    this.updateValueAt(dragging.index, value);
  }

  _mouseUp() {
    // Label-dragging is disabled on mouseup
    this._dragging = null;
    this.isDraggingLabel = false;

    // Filter drag/drop needs more cleaning
    if (!this.isReorderingFilter) {
      return;
    }
    const filterEl = this.filterList.querySelector(".dragging");

    this.isReorderingFilter = false;
    filterEl.classList.remove("dragging");
    this.el.classList.remove("dragging");
    filterEl.removeAttribute("style");

    this.emit("updated", this.getCssValue());
    this.render();
  }

  _presetClick(e) {
    const el = e.target;
    const preset = el.closest(".preset");
    if (!preset) {
      return;
    }

    const id = +preset.dataset.id;

    this.getPresets().then(presets => {
      if (el.classList.contains("remove-button")) {
        // If the click happened on the remove button.
        presets.splice(id, 1);
        this.setPresets(presets).then(this.renderPresets, console.error);
      } else {
        // Or if the click happened on a preset.
        const p = presets[id];

        this.setCssValue(p.value);
        this.addPresetInput.value = p.name;
      }
    }, console.error);
  }

  _togglePresets() {
    this.el.classList.toggle("show-presets");
    this.emit("render");
  }

  _savePreset(e) {
    e.preventDefault();

    const name = this.addPresetInput.value;
    const value = this.getCssValue();

    if (!name || !value || SPECIAL_VALUES.has(value)) {
      this.emit("preset-save-error");
      return;
    }

    this.getPresets().then(presets => {
      const index = presets.findIndex(preset => preset.name === name);

      if (index > -1) {
        presets[index].value = value;
      } else {
        presets.push({ name, value });
      }

      this.setPresets(presets).then(this.renderPresets, console.error);
    }, console.error);
  }

  /**
   * Workaround needed to reset the focus when using a HTML select inside a XUL panel.
   * See Bug 1294366.
   */
  _resetFocus() {
    this.filterSelect.ownerDocument.defaultView.focus();
  }

  /**
   * Clears the list and renders filters, binding required events.
   * There are some delegated events bound in _addEventListeners method
   */
  render() {
    if (!this.filters.length) {
      // eslint-disable-next-line no-unsanitized/property
      this.filterList.innerHTML = `<p> ${L10N.getStr("emptyFilterList")} <br />
                                 ${L10N.getStr("addUsingList")} </p>`;
      this.emit("render");
      return;
    }

    this.filterList.innerHTML = "";

    const base = this._filterItemMarkup;

    for (const filter of this.filters) {
      const def = this._definition(filter.name);

      const el = base.cloneNode(true);

      const [name, value] = el.children;
      const label = name.children[1];
      const [input, unitPreview] = value.children;

      let min, max;
      if (def.range) {
        [min, max] = def.range;
      }

      label.textContent = filter.name;
      input.value = filter.value;

      switch (def.type) {
        case "percentage":
        case "angle":
        case "length":
          input.type = "number";
          input.min = min;
          if (max !== Infinity) {
            input.max = max;
          }
          input.step = "0.1";
          break;
        case "string":
          input.type = "text";
          input.placeholder = def.placeholder;
          break;
      }

      // use photoshop-style label-dragging
      // and show filters' unit next to their <input>
      if (def.type !== "string") {
        unitPreview.textContent = filter.unit;

        label.classList.add("devtools-draglabel");
        label.title = L10N.getStr("labelDragTooltipText");
      } else {
        // string-type filters have no unit
        unitPreview.remove();
      }

      this.filterList.appendChild(el);
    }

    const lastInput = this.filterList.querySelector(
      ".filter:last-of-type input"
    );
    if (lastInput) {
      lastInput.focus();
      if (lastInput.type === "text") {
        // move cursor to end of input
        const end = lastInput.value.length;
        lastInput.setSelectionRange(end, end);
      }
    }

    this.emit("render");
  }

  renderPresets() {
    this.getPresets().then(presets => {
      // getPresets is async and the widget may be destroyed in between.
      if (!this.presetList) {
        return;
      }

      if (!presets || !presets.length) {
        // eslint-disable-next-line no-unsanitized/property
        this.presetList.innerHTML = `<p>${L10N.getStr("emptyPresetList")}</p>`;
        this.emit("render");
        return;
      }
      const base = this._presetItemMarkup;

      this.presetList.innerHTML = "";

      for (const [index, preset] of presets.entries()) {
        const el = base.cloneNode(true);

        const [label, span] = el.children;

        el.dataset.id = index;

        label.textContent = preset.name;
        span.textContent = preset.value;

        this.presetList.appendChild(el);
      }

      this.emit("render");
    });
  }

  /**
   * returns definition of a filter as defined in filterList
   *
   * @param {string} name
   *        filter name (e.g. blur)
   * @return {object}
   *        filter's definition
   */
  _definition(name) {
    name = name.toLowerCase();
    return filterList.find(a => a.name === name);
  }

  /**
   * Parses the CSS value specified, updating widget's filters
   *
   * @param {string} cssValue
   *        css value to be parsed
   */
  setCssValue(cssValue) {
    if (!cssValue) {
      throw new Error("Missing CSS filter value in setCssValue");
    }

    this.filters = [];

    if (SPECIAL_VALUES.has(cssValue)) {
      this._specialValue = cssValue;
      this.emit("updated", this.getCssValue());
      this.render();
      return;
    }

    for (let { name, value } of tokenizeFilterValue(cssValue)) {
      // If the specified value is invalid, replace it with the
      // default.
      if (name !== "url") {
        if (!this._cssIsValid("filter", name + "(" + value + ")")) {
          value = null;
        }
      }

      this.add(name, value, true);
    }

    this.emit("updated", this.getCssValue());
    this.render();
  }

  /**
   * Creates a new [name] filter record with value
   *
   * @param {string} name
   *        filter name (e.g. blur)
   * @param {string} value
   *        value of the filter (e.g. 30px, 20%)
   *        If this is |null|, then a default value may be supplied.
   * @return {number}
   *        The index of the new filter in the current list of filters
   * @param {boolean}
   *        By default, adding a new filter emits an "updated" event, but if
   *        you're calling add in a loop and wait to emit a single event after
   *        the loop yourself, set this parameter to true.
   */
  add(name, value, noEvent) {
    const def = this._definition(name);
    if (!def) {
      return false;
    }

    if (value === null) {
      // UNIT_MAPPING[string] is an empty string (falsy), so
      // using || doesn't work here
      const unitLabel =
        typeof UNIT_MAPPING[def.type] === "undefined"
          ? UNIT_MAPPING[DEFAULT_FILTER_TYPE]
          : UNIT_MAPPING[def.type];

      // string-type filters have no default value but a placeholder instead
      if (!unitLabel) {
        value = "";
      } else {
        value = def.range[0] + unitLabel;
      }
    }

    let unit = def.type === "string" ? "" : (/[a-zA-Z%]+/.exec(value) || [])[0];

    if (def.type !== "string") {
      value = parseFloat(value);

      // You can omit percentage values' and use a value between 0..1
      if (def.type === "percentage" && !unit) {
        value = value * 100;
        unit = "%";
      }

      const [min, max] = def.range;
      if (value < min) {
        value = min;
      } else if (value > max) {
        value = max;
      }
    }

    const index = this.filters.push({ value, unit, name }) - 1;
    if (!noEvent) {
      this.emit("updated", this.getCssValue());
    }

    return index;
  }

  /**
   * returns value + unit of the specified filter
   *
   * @param {number} index
   *        filter index
   * @return {string}
   *        css value of filter
   */
  getValueAt(index) {
    const filter = this.filters[index];
    if (!filter) {
      return null;
    }

    // Just return the value url functions.
    if (filter.name === "url") {
      return filter.value;
    }

    return filter.value + filter.unit;
  }

  removeAt(index) {
    if (!this.filters[index]) {
      return;
    }

    this.filters.splice(index, 1);
    this.emit("updated", this.getCssValue());
    this.render();
  }

  /**
   * Generates CSS filter value for filters of the widget
   *
   * @return {string}
   *        css value of filters
   */
  getCssValue() {
    return (
      this.filters
        .map((filter, i) => {
          return `${filter.name}(${this.getValueAt(i)})`;
        })
        .join(" ") ||
      this._specialValue ||
      "none"
    );
  }

  /**
   * Updates specified filter's value
   *
   * @param {number} index
   *        The index of the filter in the current list of filters
   * @param {number/string} value
   *        value to set, string for string-typed filters
   *        number for the rest (unit automatically determined)
   */
  updateValueAt(index, value) {
    const filter = this.filters[index];
    if (!filter) {
      return;
    }

    const def = this._definition(filter.name);

    if (def.type !== "string") {
      const [min, max] = def.range;
      if (value < min) {
        value = min;
      } else if (value > max) {
        value = max;
      }
    }

    filter.value = filter.unit ? fixFloat(value, true) : value;

    this.emit("updated", this.getCssValue());
  }

  getPresets() {
    return asyncStorage.getItem("cssFilterPresets").then(presets => {
      if (!presets) {
        return [];
      }

      return presets;
    }, console.error);
  }

  setPresets(presets) {
    return asyncStorage
      .setItem("cssFilterPresets", presets)
      .catch(console.error);
  }
}

exports.CSSFilterEditorWidget = CSSFilterEditorWidget;

// Fixes JavaScript's float precision
function fixFloat(a, number) {
  const fixed = parseFloat(a).toFixed(1);
  return number ? parseFloat(fixed) : fixed;
}

/**
 * Used to swap two filters' indexes
 * after drag/drop re-ordering
 *
 * @param {Array} array
 *        the array to swap elements of
 * @param {number} a
 *        index of first element
 * @param {number} b
 *        index of second element
 */
function swapArrayIndices(array, a, b) {
  array[a] = array.splice(b, 1, array[a])[0];
}

/**
 * Tokenizes a CSS Filter value and returns an array of {name, value} pairs.
 *
 * @param {string} css CSS Filter value to be parsed
 * @return {Array} An array of {name, value} pairs
 */
function tokenizeFilterValue(css) {
  const filters = [];
  let depth = 0;

  if (SPECIAL_VALUES.has(css)) {
    return filters;
  }

  let state = "initial";
  let name;
  let contents;
  for (const token of cssTokenizer(css)) {
    switch (state) {
      case "initial":
        if (token.tokenType === "Function") {
          name = token.value;
          contents = "";
          state = "function";
          depth = 1;
        } else if (
          token.tokenType === "UnquotedUrl" ||
          token.tokenType === "BadUrl"
        ) {
          const url = token.text
            .substring(
              // token text starts with `url(`
              4,
              // unquoted url also include the closing parenthesis
              token.tokenType == "UnquotedUrl"
                ? token.text.length - 1
                : undefined
            )
            .trim();

          filters.push({ name: "url", value: url });
          // Leave state as "initial" because the URL token includes
          // the trailing close paren.
        }
        break;

      case "function":
        if (token.tokenType === "CloseParenthesis") {
          --depth;
          if (depth === 0) {
            filters.push({ name, value: contents.trim() });
            state = "initial";
            break;
          }
        }
        contents += css.substring(token.startOffset, token.endOffset);
        if (
          token.tokenType === "Function" ||
          token.tokenType === "Parenthesis"
        ) {
          ++depth;
        }
        break;
    }
  }

  return filters;
}

/**
 * Finds neighbour number characters of an index in a string
 * the numbers may be floats (containing dots)
 * It's assumed that the value given to this function is a valid number
 *
 * @param {string} string
 *        The string containing numbers
 * @param {number} index
 *        The index to look for neighbours for
 * @return {object}
 *         returns null if no number is found
 *         value: The number found
 *         start: The number's starting index
 *         end: The number's ending index
 */
function getNeighbourNumber(string, index) {
  if (!/\d/.test(string)) {
    return null;
  }

  let left = /-?[0-9.]*$/.exec(string.slice(0, index));
  let right = /-?[0-9.]*/.exec(string.slice(index));

  left = left ? left[0] : "";
  right = right ? right[0] : "";

  if (!right && !left) {
    return null;
  }

  return {
    value: fixFloat(left + right, true),
    start: index - left.length,
    end: index + right.length,
  };
}