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

    <md-dialog :md-active.sync="showNewElementChooser">
      <md-dialog-title>Select the type of the new element</md-dialog-title>


      <md-button @click="newElement('ingest')">
        <md-icon>vertical_align_bottom</md-icon>
        Ingest
      </md-button>
      <i></i> <!-- This is to prevent margin collapse -->

      <md-button @click="newElement('encoder')">
        <md-icon>gradient</md-icon>
        Encoder
      </md-button>
      <i></i>

      <md-button @click="newElement('restreamer')">
        <md-icon>publish</md-icon>
        Restreamer
      </md-button>


    </md-dialog>

    <md-toolbar class="md-primary">

      <md-button class="md-icon-button" @click="showNavigation = true">
        <md-icon>menu</md-icon>
      </md-button>
      <span class="md-title">VideON</span>

      <div class="md-toolbar-section-end">
        <md-button class="md-raised" :disabled="true">Apply</md-button>
      </div>

    </md-toolbar>

    <md-drawer :md-active.sync="showNavigation" md-swipeable>
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">VideON</span>


      </md-toolbar>

      <md-list>
        <md-list-item>
          <md-avatar class="md-avatar-icon">J</md-avatar>
          <span class="md-list-item-text">Joska</span>
        </md-list-item>

        <md-list-item>
          <md-button class="md-raised md-accent">Logout</md-button>
        </md-list-item>

      </md-list>

    </md-drawer>

    <md-content id="diagram-container">
      <simple-flowchart :scene.sync="diagram"></simple-flowchart>

      <md-speed-dial class="md-bottom-right">
        <md-speed-dial-target @click="performAddElement">
          <md-icon>add</md-icon>
        </md-speed-dial-target>

        <md-speed-dial-content>
          <md-button @click="newElement('restreamer')" class="md-icon-button">
            <md-icon>publish</md-icon>
          </md-button>

          <md-button @click="newElement('encoder')" class="md-icon-button">
            <md-icon>gradient</md-icon>
          </md-button>

          <md-button @click="newElement('ingest')" class="md-icon-button">
            <md-icon>vertical_align_bottom</md-icon>
          </md-button>

        </md-speed-dial-content>
      </md-speed-dial>

    </md-content>

  </div>
</template>

<script>

import SimpleFlowchart from '@/simple-flowchart';


export default {
  name: 'Dashboard',
  components: {SimpleFlowchart},
  data: () => ({
    showNavigation: false,
    showNewElementChooser: 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: {
    performAddElement() {
      this.showNewElementChooser = true;
    },
    newElement(type) {
      console.log(type);
      this.showNewElementChooser = false;
    }
  }

}
</script>

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

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

#fab-holder {
  position: absolute;
  z-index: 5;
  right: 2rem;
  bottom: 2rem;
}
</style>