<template>
  <div class="page-container md-layout-column" id="dashboard-container">

    <!-- toolbar -->
    <toolbar @showDrawerClicked="showDrawer = true" :processing="true" :model-changed="true"/>

    <!-- drawer -->
    <md-drawer :md-active.sync="showDrawer" md-swipeable>
      <workspace-drawer-content/>
    </md-drawer>

    <!-- workspace -->
    <md-content id="diagram-container">
      <simple-flowchart :scene.sync="diagram"></simple-flowchart>
      <element-adder @addElement="newElement"/>
    </md-content>

  </div>
</template>

<script>

import SimpleFlowchart from '@/simple-flowchart';
import ElementAdder from "@/components/ElementAdder";
import WorkspaceDrawerContent from "@/components/WorkspaceDrawerContent";
import Toolbar from "@/components/Toolbar";
import {maxBy} from 'lodash';

export default {
  name: 'Dashboard',
  components: {
    SimpleFlowchart,
    ElementAdder,
    WorkspaceDrawerContent,
    Toolbar
  },
  data: () => ({
    showDrawer: false,
    diagram: {
      centerX: 0,
      centerY: 0,
      scale: 1,
      nodes: [
        {
          id: 2,
          x: 100,
          y: 110,
          type: 'ingest',
          data: {"url": "rtmp://videon.test.kmlabz.com/test:6554"},
        },
        {
          id: 4,
          x: 357,
          y: 80,
          type: 'restreamer',
          data: {"url": "rtmp://youtube.com/live/stream/ysos:55223", "streamkey": "asdjnao9gj9833tjkq389fjae9jf"},
        },
        {
          id: 6,
          x: 557,
          y: 80,
          type: 'encoder',
          data: {"bitrate": 8000, "width": 600, "height": 800}
        }
      ],
      links: [
        {
          id: 1,
          from: 2, // node id the link start
          to: 4,  // node id the link end
        }
      ]
    }
  }),
  methods: {
    newElement(type) {
      this.showNewElementChooser = false;

      let newNode = {
        x: 10,
        y: 10,
        type
      }

      switch (type) {
        case "ingest":
          newNode.data = {
            "url": "https://videon.test.kmlabz.com/live"
          }
          break;
        case "encoder":
          newNode.data = {
            "bitrate": 8000,
            "width": 600,
            "height": 800
          }
          break;
        case "restreamer":
          newNode.data = {
            "url": "https://youtube.com/live",
            "streamkey": "testkey"
          }
          break;
      }

      if (this.diagram.nodes.length > 0) {
        const max_id = maxBy(this.diagram.nodes, 'id').id

        newNode.id = max_id + 1;
      } else {
        newNode.id = 1;
      }

      this.diagram.nodes.push(newNode)

    }
  }

}
</script>

<style scoped>
#dashboard-container {
  height: 100%;
}

#diagram-container {
  height: calc(100% - 64px);
}
</style>