import { Marker } from "../models/marker";
import { PodState } from "@chartwerk/core";
import { LineTimeSerie, LineOptions } from "../types";

import d3 from "d3";

export class Markers {
  private _markers: Marker[] = [];
  private _d3Holder = null;

  constructor() {
  }

  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, state: PodState<LineTimeSerie, LineOptions>) {
    if(this._d3Holder !== null) {
      this._d3Holder.remove();
    }
    this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');

    let linePosition = state.xScale(1701790172908 + 3 * 1000) as number;

    this._d3Holder.append('line')
        .attr('class', 'gap-line')
        .attr('stroke', 'red')
        .attr('stroke-width', '1px')
        .attr('stroke-opacity', '0.3')
        .attr('stroke-dasharray', '4')
        .attr('x1', linePosition)
        .attr('x2', linePosition)
        .attr('y1', 0)
        // @ts-ignore
        .attr('y2', state.boxParams.height);
    
    // for (const marker of markers) {
    //   // @ts-ignore
    //   const linePosition = pod.state.xScale(marker.time) as number;
    //   yAxisContainer.append('line')
    //     .attr('class', 'gap-line')
    //     .attr('stroke', marker.color)
    //     .attr('stroke-width', '1px')
    //     .attr('stroke-opacity', '0.3')
    //     .attr('stroke-dasharray', '4')
    //     .attr('x1', linePosition)
    //     .attr('x2', linePosition)
    //     .attr('y1', 0)
    //     // @ts-ignore
    //     .attr('y2', pod.state.boxParams.height);

    this._d3Holder.append('circle')
        .attr('class', 'gap-circle')
        .attr('stroke', 'red')
        .attr('stroke-width', '2px')
        .attr('r', 4)
        .attr('cx', linePosition)
        .attr('cy', 5)
        .attr('pointer-events', 'all')
        .style('cursor', 'pointer')
        // .on('mousemove', () => {
        //   setTooltipContent({ type: TooltipType.FUNCTION, ...marker.data });
        //   return null;
        // })
        // .on('mouseout', () => {
        //   setTooltipContent({ type: TooltipType.HIDDEN });
        //   return null;
        // });
    // }
  }
  
  pushMarker(marker: Marker) {
    this._markers.push(marker);
  }
}