<template>   
  <v-app class= "grey lighten-2">
    
    <Navbar/>
    <v-main class="grey lighten-2" align="center">
      <!-- set to true for normal grpcClient -->
      <gRPCclient v-if="true"  v-on:newPoint="addPoint($event)" />
      <gRPCDaprClient v-if="false" v-on:newPoint="addPoint($event)" />
      <ScatterPlot ref = "scatter"/>
      <Counter ref = "counter"/>

    </v-main>
  </v-app>
</template>

<script>
import Navbar from './components/Navbar';
import gRPCDaprClient from './components/gRPCDaprClient'
import gRPCclient from './components/gRPCclient'
import ScatterPlot from './components/ScatterPlot'
import { interval } from 'rxjs';
import Counter from './components/counter'
export default {
  name: 'App',

  components: {
    Navbar,
    gRPCDaprClient,
    gRPCclient,
    ScatterPlot,
    Counter  },
  created(){    
    const interValsource = interval(1000);
    interValsource.subscribe(val => this.distributeStreams(val));
   
  },
  data(){
    return {
      pointList: [],
      streamStarted: false,
      pointCount: 0
    }
  },
  methods: {
    addPoint: function(point){
      this.streamStarted = true;
      this.pointList.push(point);
    },
    distributeStreams: function(val){
      //REMOVE THIS LATER
      if(val == -1){
        return
      }
      if(!this.streamStarted){
        return;
      }

      if(this.pointList.length <= this.pointCount){
        return;
      }

      //Give the point to all components

      var index = Math.floor(Math.random() * Math.floor(this.pointList.length));
      this.$refs.scatter.addPointToPlot(this.pointList[index]);
      this.$refs.counter.setCounter(this.pointList.length)

      this.pointCount += 1;
    }
    }
  };
</script>