/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

requestLongerTimeout(2);

// Tests the Filter Editor Widget's label-dragging

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

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

const GRAYSCALE_MAX = 100,
  GRAYSCALE_MIN = 0;

const TEST_URI = CHROME_URL_ROOT + "doc_filter-editor-01.html";

add_task(async function () {
  const { doc } = await createHost("bottom", TEST_URI);

  const container = doc.querySelector("#filter-container");
  const widget = new CSSFilterEditorWidget(
    container,
    "grayscale(0%) url(test.svg)"
  );

  const filters = widget.el.querySelector("#filters");
  const grayscale = filters.children[0];
  const url = filters.children[1];

  info("Test label-dragging on number-type filters without modifiers");
  widget._mouseDown({
    target: grayscale.querySelector("label"),
    pageX: 0,
    altKey: false,
    shiftKey: false,
  });

  widget._mouseMove({
    pageX: 12,
    altKey: false,
    shiftKey: false,
  });
  let expected = DEFAULT_VALUE_MULTIPLIER * 12;
  is(
    widget.getValueAt(0),
    `${expected}%`,
    "Should update value correctly without modifiers"
  );

  info("Test label-dragging on number-type filters with alt");
  widget._mouseMove({
    // 20 - 12 = 8
    pageX: 20,
    altKey: true,
    shiftKey: false,
  });

  expected = expected + SLOW_VALUE_MULTIPLIER * 8;
  is(
    widget.getValueAt(0),
    `${expected}%`,
    "Should update value correctly with alt key"
  );

  info("Test label-dragging on number-type filters with shift");
  widget._mouseMove({
    // 25 - 20 = 5
    pageX: 25,
    altKey: false,
    shiftKey: true,
  });

  expected = expected + FAST_VALUE_MULTIPLIER * 5;
  is(
    widget.getValueAt(0),
    `${expected}%`,
    "Should update value correctly with shift key"
  );

  info("Test releasing mouse and dragging again");

  widget._mouseUp();

  widget._mouseDown({
    target: grayscale.querySelector("label"),
    pageX: 0,
    altKey: false,
    shiftKey: false,
  });

  widget._mouseMove({
    pageX: 5,
    altKey: false,
    shiftKey: false,
  });

  expected = expected + DEFAULT_VALUE_MULTIPLIER * 5;
  is(
    widget.getValueAt(0),
    `${expected}%`,
    "Should reset multiplier to default"
  );

  info("Test value ranges");

  widget._mouseMove({
    // 30 - 25 = 5
    pageX: 30,
    altKey: false,
    shiftKey: true,
  });

  expected = GRAYSCALE_MAX;
  is(
    widget.getValueAt(0),
    `${expected}%`,
    "Shouldn't allow values higher than max"
  );

  widget._mouseMove({
    pageX: -11,
    altKey: false,
    shiftKey: true,
  });

  expected = GRAYSCALE_MIN;
  is(
    widget.getValueAt(0),
    `${expected}%`,
    "Shouldn't allow values less than min"
  );

  widget._mouseUp();

  info("Test label-dragging on string-type filters");
  widget._mouseDown({
    target: url.querySelector("label"),
    pageX: 0,
    altKey: false,
    shiftKey: false,
  });

  ok(
    !widget.isDraggingLabel,
    "Label-dragging should not work for string-type filters"
  );

  widget._mouseMove({
    pageX: -11,
    altKey: false,
    shiftKey: true,
  });

  is(
    widget.getValueAt(1),
    "test.svg",
    "Label-dragging on string-type filters shouldn't affect their value"
  );
  widget.destroy();
});