import React, { useState, useEffect, useRef } from "react";
import logo from "./logo.svg";
import "./App.css";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";

// PUT LICENSE KEY HERE
const LICENSE_KEY = ""

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Test/>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;



function Test(props) {
  const [sciChartSurface, setSciChartSurface] = useState();
  const dataSeriesRef = useRef();

  const [data, setData] = useState([{ x: 50, y: 300 }, { x: 60, y: 350 }])

  let onDispose = []

  useEffect(() => {
      SciChartSurface.setRuntimeLicenseKey(LICENSE_KEY);
      let unmounted = false

      ;(async () => {
          const {sciChartSurface, wasmContext} = await SciChartSurface.create(id)

          setSciChartSurface(sciChartSurface);

          if (unmounted) {
              sciChartSurface.delete()
              return
          }

          const xAxis = new NumericAxis(wasmContext);
          const yAxis = new NumericAxis(wasmContext);

          sciChartSurface.xAxes.add(xAxis);
          sciChartSurface.yAxes.add(yAxis);
  
          const dataSeries = new XyDataSeries(wasmContext, {
            xValues : [],
            yValues: [],
          });

          dataSeriesRef.current = dataSeries;

          const lineSeries = new FastLineRenderableSeries(wasmContext, {
            dataSeries : dataSeries,
            stroke: "red",
          });
          lineSeries.strokeThickness = 3;
          sciChartSurface.renderableSeries.add(lineSeries);

          onDispose.push(() => {
              dataSeries.delete()
              lineSeries.delete()
              xAxis.delete()
              yAxis.delete()
              sciChartSurface.delete()
          })
      })()

      return () => {
          unmounted = true
          onDispose.forEach((clbk) => clbk())
          onDispose.length = 0
      }
  }, []) // chart initialization should be performed only once

  useEffect(() => {
    if(!sciChartSurface || !dataSeriesRef.current) {
      return;
    }

    const xValues = data.map(xy => xy.x)
    const yValues = data.map(xy => xy.y)

    dataSeriesRef.current.appendRange(xValues, yValues);
  }, [data])

  useEffect(() => {
      let sub = setInterval(() => {
          const newData = data.slice()
          newData.push({ x: data[data.length - 1].x + 10, y: Math.random() * 1000 })
          console.log(newData)
          setData(newData)
      }, 5000)
      return () => clearInterval(sub)
  }, [])

  const id = `chart`

  return (
      <div id={id} style={{
          width: '600px',
          margin: 'auto'
      }}>

      </div>
  );
}