<script setup lang="ts">
import { ref } from 'vue'
import PlotList from './components/PlotList.vue'
import Figure from './components/Figure.vue'
import { Figure as FigureType } from './grpc/figure'

var plots = ref<FigureType[]>([])
var paused = ref(false)

function addPlot(fig: FigureType) {
  console.log('Plot added', fig)
  plots.value.push(fig)
  console.log(plots)
}
function removePlot(fig: FigureType) {
  console.log('Plot removed', fig)
  plots.value = plots.value.filter((x) => x.uuid !== fig.uuid)
  console.log(plots)
}
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $props: {
      onClick?: (e: MouseEvent) => void
    }
  }
}
</script>

<template>
  <v-app>
    <PlotList @figure-selected="addPlot" @figure-deselected="removePlot" />

    <v-main>
      <v-container fluid>
        <Figure v-for="plot in plots" :key="plot.uuid" :figure="plot" :paused="paused" />
      </v-container>
      <v-fab location="right bottom" color="secondary" @click="paused = !paused" icon app>
        <v-icon :icon="paused ? 'mdi-play' : 'mdi-pause'"></v-icon>
      </v-fab>
    </v-main>
  </v-app>
</template>
