const {
  SciChartSurface,
  NumericAxis,
  EAxisAlignment,
  LeftAlignedOuterVerticallyStackedAxisLayoutStrategy,
  SciChartJsNavyTheme,
  NumberRange,
  TextAnnotation,
  XyDataSeries,
  SweepAnimation,
  ZoomExtentsModifier,
  CustomChartModifier2D,
  MouseWheelZoomModifier,
  ZoomPanModifier,
  RubberBandSvgRect,
  Rect,
  testIsInBounds,
  ModifierMouseArgs,
  DpiHelper
} = SciChart;

// Define a custom modifier that detects clicks on chart parts
// See https://www.scichart.com/documentation/js/current/webframe.html#DetectingClicksOnChartParts.html
//

class DetectClicksOnChartPartsModifier extends CustomChartModifier2D {
  onAttach() {
    super.onAttach();
    // Rectangle used to show visually what chart part you clicked
    this.debugRect = new RubberBandSvgRect(
      this.parentSurface.domSvgAdornerLayer,
      "#FF000033",
      "Transparent",
      0
    );
  }

  onDetach() {
    super.onDetach();
    this.debugRect.delete();
  }
  modifierMouseDown(args) {
    // do nothing
  }
  modifierMouseUp(args) {
    // do nothing
  }
  modifierMouseMove(args) {
    super.modifierMouseMove(args);
    const mousePoint = args.mousePoint;
    this.updateDebugRectangle(undefined);
    // Check if the mouse was over A YAxis
    this.parentSurface?.yAxes.asArray().forEach((yAxis) => {
      const { left, right, top, bottom } = yAxis.viewRect;
      if (
        testIsInBounds(mousePoint.x, mousePoint.y, left, bottom, right, top)
      ) {
        console.log("Mouse is over YAxis ID=" + yAxis.id);
        this.updateDebugRectangle(yAxis.viewRect);
      }
    });
    // Check if the mouse was over an XAxis
    this.parentSurface?.xAxes.asArray().forEach((xAxis) => {
      const { left, right, top, bottom } = xAxis.viewRect;
      if (
        testIsInBounds(mousePoint.x, mousePoint.y, left, bottom, right, top)
      ) {
        console.log("Mouse is over XAxis ID=" + xAxis.id);
        this.updateDebugRectangle(xAxis.viewRect);
      }
    });
    // Check if the mouse was over the main chart area
    const { left, right, top, bottom } = this.parentSurface?.seriesViewRect;
    if (testIsInBounds(mousePoint.x, mousePoint.y, left, bottom, right, top)) {
      console.log("Mouse is over main Chart area");
      this.updateDebugRectangle(this.parentSurface?.seriesViewRect);
      // Check if the mouse was over any series
      this.parentSurface?.renderableSeries.asArray().forEach((rSeries) => {
        const hitTestInfo = rSeries.hitTestProvider.hitTest(
          mousePoint.x,
          mousePoint.y
        );
        if (hitTestInfo.isHit) {
          console.log(
            `RenderableSeries with seriesname=${rSeries.dataSeries.dataSeriesName} was hovered`
          );
          rSeries.isHovered = true;
        } else {
          rSeries.isHovered = false;
        }
      });
    }
  }
  updateDebugRectangle(rect) {
    if (!rect) {
      this.debugRect.isHidden = true;
      return;
    }
    this.debugRect.isHidden = false;
    // svgAdornerLayer works on scaled coordinates so we need to adjust for Dpi
    this.debugRect.x1 = rect.x / DpiHelper.PIXEL_RATIO;
    this.debugRect.y1 = rect.y / DpiHelper.PIXEL_RATIO;
    this.debugRect.x2 = (rect.x + rect.width) / DpiHelper.PIXEL_RATIO;
    this.debugRect.y2 = (rect.y + rect.height) / DpiHelper.PIXEL_RATIO;
    this.debugRect.isHidden = false;
  }
}

//
// Create the chart and attach the custom modifier
//

const drawExample = async () => {
  // Create a SciChartSurface
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    "scichart-root",
    {
      theme: new SciChartJsNavyTheme()
    }
  );
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));

  // Create 3x Y Axis aligned left. Set the YAxis.id in a multi axis scenario
  const axisAlignment = EAxisAlignment.Left;
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      id: "YAxis0",
      axisAlignment,
      axisTitle: "YAxis 0"
    })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      id: "YAxis1",
      axisAlignment,
      axisTitle: "YAxis 1"
    })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      id: "YAxis2",
      axisAlignment,
      axisTitle: "YAxis 2"
    })
  );

  sciChartSurface.annotations.add(
    new TextAnnotation({
      x1: 3,
      y1: 5,
      fontSize: 24,
      text: "Hover over the chart to detect different chart parts"
    })
  );

  // Set axis stacking (see https://www.scichart.com/documentation/js/current/webframe.html#Axis%20Layout%20-%20Vertically%20Stacked%20Axis.html)
  sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

  // Attach custom modifier
  sciChartSurface.chartModifiers.add(new DetectClicksOnChartPartsModifier());
};

drawExample();