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


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

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

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


    </md-dialog>


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

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

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

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

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

<script>
export default {
  name: "ElementAdder",
  data() {
    return {
      showNewElementChooser: false
    }
  },
  methods: {
    addElement(type) {
      this.showNewElementChooser = false;
      this.$emit("addElement", type)
    }
  }
}
</script>

<style scoped>

</style>