import { InteractingEntryGenerator } from './interacting-entry-generator';
import { select as d3Select } from '../../../polyfill/d3';
/** The `ArcPathHoverGenerator` class is a TypeScript function that handles mouseover events on SVG elements with a specific class and modifies their appearance. */
export class ArcPathHoverGenerator extends InteractingEntryGenerator {
  constructor() {
    super(...arguments);
    this.eventType = 'mouseover';
  }
  /**
   * The function "createShouldHandle" returns a function that takes an event as a parameter and returns a boolean value.
   *
   * @returns {InteractingEntry['shouldHandle']} A function that takes an event as an argument and returns a boolean value.
   */
  createShouldHandle() {
    return this.shouldHandle;
  }
  /**
   * The function "createHandle" returns the handle property of an InteractingEntry object.
   *
   * @returns {InteractingEntry['handle']} The `handle` property of the `InteractingEntry` object is being returned.
   */
  createHandle() {
    return this.handle;
  }
  /**
   * The function checks if the target element of a mouse event has a specific class.
   *
   * @param {MouseEvent} event - MouseEvent is a type of event that is triggered when a mouse action
   * occurs, such as a click or hover. It contains information about the event, such as the target
   * element and the position of the mouse. In this code snippet, the function `shouldHandle` takes in a
   * MouseEvent as a parameter.
   * @returns {boolean} The function `shouldHandle` is returning a boolean value. It checks if the `event.target`
   * is an HTML element with the class name `vega-chart-arc-path`. If it is, then it returns `true`,
   * otherwise it returns `false`.
   */
  shouldHandle(event) {
    return event.target.classList.contains('vega-chart-arc-path');
  }
  /**
   * This function handles mouse events on a D3 selection of SVG elements, specifically for hovering over and highlighting a specific path element.
   *
   * @param {MouseEvent} event - The event parameter is of type MouseEvent, which is an object that
   * contains information about a mouse event, such as the type of event (click, hover, etc.), the
   * target element that triggered the event, and the position of the mouse cursor.
   */
  handle(event) {
    const svgSelection = d3Select(event.currentTarget);
    const targetPathNode = event.target;
    const name = targetPathNode.dataset.name;
    svgSelection.selectAll('.vega-chart-arc-path').each(function () {
      const pathNode = this;
      if (pathNode !== targetPathNode && pathNode.classList.contains('hover')) {
        pathNode.classList.remove('hover');
        const oldPath = pathNode.getAttribute('d');
        const newPath = pathNode.dataset.d;
        pathNode.dataset.d = oldPath;
        d3Select(this).transition(100).duration(100).attr('d', newPath);
      }
      else if (!targetPathNode.classList.contains('hover')) {
        targetPathNode.classList.add('hover');
        const oldPath = targetPathNode.getAttribute('d');
        const newPath = targetPathNode.dataset.d;
        targetPathNode.dataset.d = oldPath;
        d3Select(targetPathNode).transition(100).duration(100).attr('d', newPath);
        svgSelection.select('.vega-chart-draw-g text').text(name);
      }
    });
  }
}
