<template>
  <div id="toolbar">
    <div class="buttons">
      <b-button @click="showDatasetEditor">Edit dataset</b-button>
      <!--<b-button @click="createNode">Create node</b-button>-->
      <div class="field">
        <b-switch v-model="debugSwitchOn" :value="inDebug" @input="updateDebug" size="is-small"
          >Debug</b-switch
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  data() {
    return {
      debugSwitchOn: true
    }
  },

  mounted() {
    this.debugSwitchOn = this.inDebug
  },

  methods: {
    ...mapActions('interaction', ['showDatasetEditor', 'activateDebug', 'deactivateDebug']),
    createNode() {
      this.$store.dispatch('data/createNode', {
        label: 'New node',
        name: 'unnamed',
        type: 'regular',
        vis: { isUserDefined: true }
      })
    },
    updateDebug() {
      this.debugSwitchOn ? this.activateDebug() : this.deactivateDebug()
    }
  },

  computed: {
    ...mapState('interaction', ['inDebug'])
  }
}
</script>

<style lang="sass" scoped>
@import _workspace

#toolbar .el-button
  pointer-events: auto
</style>
