class BBTimelineForegroundCanvas extends BBTimelineCanvas {
  constructor(parentEl, el) {
    super(parentEl, el);

    const a = this;

    // a.initialiseComponents();
  }

  initialiseComponents() {
    super.initialiseComponents();

    const a = this;

    a.CTX.canvas.addEventListener('mousedown', function (e) {
      if (!a.Parent.Enabled) {
        return;
      }

      var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
      if (event == null) {
        return;
      }

      if (a.Parent.Debug) console.log(event);

      a.Parent.OnMouseDown(this, e, event);
    });

    a.CTX.canvas.addEventListener('click', function (e) {
      if (!a.Parent.Enabled) {
        return;
      }

      var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
      if (event == null) {
        return;
      }

      if (a.Parent.Debug) console.log(event);

      a.Parent.OnClick(this, e, event);
    });

    a.CTX.canvas.addEventListener('dblclick', function (e) {
      if (!a.Parent.Enabled) {
        return;
      }

      var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
      if (event == null) {
        return;
      }

      if (a.Parent.Debug) console.log(event);

      a.Parent.OnDblClick(this, e, event);
    });

    if (a.Parent.EnableHotTracking) {
      a.CTX.canvas.addEventListener('mousemove', function (e) {
        if (!a.Parent.Enabled) {
          return;
        }

        var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
        if (event != null) {
          a.Container.style.cursor = 'pointer';
        } else {
          a.Container.style.cursor = 'default';
        }

        // Hottracking
        if (a.Parent.EnableHotTracking) {
          const point = { X: e.offsetX, Y: e.offsetY };
          if (a.isPointInRectangle(a.Parent.Layer.Background.GraphRectangle, point)) {
            if (a.Parent.Debug) console.log(point);

            a.Parent.Layer.Flourish.XPos = point.X;

            a.Parent.OnMouseMove(this, e, event);
          } else {
            // Clear hot tracking
            a.Parent.Layer.Flourish.XPos = -1;
          }

          a.Parent.Layer.Flourish.Invalidate();
        }

      });
    }

    a.Invalidate();
  }

  Invalidate() {
    const a = this;
    const rect = a.Parent.Layer.Background.GraphRectangle;
    const margin = a.Parent.Layer.Background.Margin;

    a.Clear();

    let startPosY = 0;
    const visibleEvents = a.Parent.VisibleEvents;

    if (a.Parent.XAxis.Position == 'top') {
      startPosY = (rect.Y + a.Parent.Marker.Width + 20);
    } else {
      startPosY = (rect.Y + a.Parent.Marker.Width);
    }

    // Clear for collisions detection
    visibleEvents.forEach(function (e, i) {
      e.HitBox = { X: 0, Y:0, W: 0, H: 0};
    });

    visibleEvents.forEach(function (e, i) {
      // Calculate Y position
      let posY = a.calcMarkerPosition(e.Position.X, startPosY);
      let posY2 = 0;

      if (a.Parent.XAxis.Position == 'top') {
        posY2 = a.Parent.Layer.Background.GraphRectangle.Y;
      } else {
        posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
      }

      if (a.Parent.MarkerLabel.Line.Width > 0) {
        a.drawVerticalLine(e.Position.X, posY, posY2, a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
      }

      const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour);

      e.Position = { X: e.Position.X, Y: posY };

      if (a.Parent.ShowMarkerLabel) {
        const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.MarkerLabel.Font, a.Parent.MarkerLabel.Colour, "left");
        labelRectangle.W += a.Parent.MarkerLabel.Margin;

        e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
      } else {
        e.HitBox = markerRectangle;
      }

      if (a.Parent.Debug) a.drawRectangle(e.HitBox, "red");
      if (a.Parent.Debug) console.log(e);
    });
  }

  OnMouseDown(e) {
    if (!a.Parent.Enabled) {
      return;
    }

    var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
    if (event == null) {
      return;
    }

    if (a.Parent.Debug) console.log(event);

    console.log("!");
    a.Parent.OnMouseDown(this, e, event);
  }

  calcMarkerPosition(x, y) {
    const a = this;
    const rect = a.Parent.Layer.Background.GraphRectangle;

    // Calculate Y position
    let hasMoved = false;
    let posY = y;
    for (let i=0; i<a.Parent.Layer.Background.NoStep; i++)
    {
      posY = y + (a.Parent.Layer.Background.StepHeight * i);

      var clippedEvent = a.Parent.FindEventsByCoords(x, posY);
      if (clippedEvent == null) {
        hasMoved = true;
        break;
      }
    }

    if (!hasMoved) {
      posY = y;
    }

    return posY;
  }

}