const {
  DataPointSelectionModifier,
  FastLineRenderableSeries,
  SplineLineRenderableSeries,
  IPointMarker,
  IPointMetadata,
  IPointSeries,
  IXyyPointSeries,
  LineSeriesDrawingProvider,
  MouseWheelZoomModifier,
  NumberRange,
  NumericAxis,
  PointMarkerDrawingProvider,
  RenderPassData,
  SciChartJsNavyTheme,
  SciChartSurface,
  EllipsePointMarker,
  XyDataSeries,
  XyScatterRenderableSeries,
  XyyBaseRenderDataTransform,
  ZoomExtentsModifier,
  ZoomPanModifier,
} = SciChart;

class DashedOrSolidRenderDataTransform extends XyyBaseRenderDataTransform {
  protected runTransformInternal(renderPassData: RenderPassData): IPointSeries {
  // Guard in case the incoming data is empty
  // If you want to do nothing and draw the original data, you don't need to copy it, you can just return renderPassData.pointSeries
  if (!renderPassData.pointSeries) {
    return this.pointSeries;
  }
  // It is important to reuse this.pointSeries.  Do NOT create a new pointSeries on each transform
  const {
    xValues: oldX,
    yValues: oldY,
    indexes: oldI,
    resampled,
  } = renderPassData.pointSeries;
  const { xValues, yValues, y1Values, indexes } = this.pointSeries;
    
  // Clear the target vectors
  xValues.clear();
  yValues.clear();
  y1Values.clear();
  indexes.clear();
    
  // indexRange tells the drawing to only use a subset of the data.  If data has been resampled, then always use all of it
  const iStart = resampled ? 0 : renderPassData.indexRange.min;
        const iEnd = resampled ? oldX.size() - 1 : renderPassData.indexRange?.max;
        const ds = this.parentSeries.dataSeries as XyDataSeries;
        let prevDash = false;
        for (let i = iStart; i <= iEnd; i++) {
            const index = resampled ? oldI.get(i) : i;
            const md = ds.getMetadataAt(index);
            xValues.push_back(oldX.get(i));
            indexes.push_back(oldI.get(i));
            // Add normal point if the current or previous is not dashed
            yValues.push_back((!md.dash || !prevDash) ? oldY.get(i) : NaN);   
            // Add dashed point if the current or previous is dashed
            y1Values.push_back(prevDash || md.dash ? oldY.get(i) : NaN);
            
            if (md.dash && !prevDash) {
              // Add a break in the normal if the current is dashed but the previous was not
              xValues.push_back(oldX.get(i));
              yValues.push_back(NaN);
              y1Values.push_back(oldY.get(i))
            } else if (!md.dash && prevDash) {
              // Add a break in the dashed if the current is not dashed but the previous was
              xValues.push_back(oldX.get(i));
              yValues.push_back(oldY.get(i));
              y1Values.push_back(NaN);
            }
            prevDash = md.dash;
        }
    // Return the transformed point series
        return this.pointSeries;
  }
}

class DashDottedLineSeries extends FastLineRenderableSeries {
  constructor(wasmContext, options) {
    super(wasmContext, options);
    this.alternateStrokeDashArray = [3,4];
    this.alternateStroke = "Orange";
    
    // Add the new drawingProvider to the series
    const dashedDrawingProvider = new LineSeriesDrawingProvider(wasmContext, this, (ps) => ps.y1Values);
    this.drawingProviders.push(dashedDrawingProvider);
    
    dashedDrawingProvider.getProperties = (parentSeries) => {
      const { stroke, strokeThickness, opacity, isDigitalLine, lineType, drawNaNAs } = parentSeries;
      return {
          stroke: this.alternateStroke,
          strokeThickness,
          strokeDashArray: this.alternateStrokeDashArray,
          isDigitalLine,
          lineType,
          drawNaNAs,
          containsNaN: true,        
      };
    };
    
    // Create the transform and add it to the series. Pass only the lineDrawingProviders
    this.renderDataTransform = new DashedOrSolidRenderDataTransform(this, wasmContext, [this.drawingProviders[0], dashedDrawingProvider]);  
  }    
}

async function simpleSplit(divElementId: string) {
  
  // Create a SciChartSurface with X,Y Axis
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId, { 
    theme: new SciChartJsNavyTheme() }
  );
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1)}));
  
  // Create the data. X,Y values are numeric
  // dashValues are mapped to metadata (javascript objects)
  const xValues = [0,1,2,3,4,5,6];
  const yValues = [1,8,3,4,2,3,4];
  const metadata = [0,0,0,0,1,1,1].map(num => ({ dash: num }));
  
  const dataSeries = new XyDataSeries(wasmContext, {
      xValues,
      yValues,
      metadata
    });  
  const lineSeries = new DashDottedLineSeries(wasmContext, {
    dataSeries,
    strokeThickness: 3,
    stroke: "SteelBlue",
    pointMarker: new EllipsePointMarker(wasmContext, { width: 7, height: 7, strokeThickness:0, fill: "SteelBlue"})
  });
  
  sciChartSurface.renderableSeries.add(lineSeries);
}

simpleSplit("scichart-root");