<template>
  <header>
    <b-navbar class="toolbar toolbar-component">
      <template slot="brand">
        <b-navbar-item tag="router-link" to="/" class="logo">
          VISILANT
        </b-navbar-item>
      </template>

      <template slot="start">
        <b-navbar-item v-if="view !== 'dashboard'">
          <router-link to="/">
            <p class="navbar-text">
              <font-awesome-icon
                icon="chevron-left"
                class="font-awesome-icon"
                style="font-size: 0.7rem; margin-right: 5px"
              />
              Overview dashboard
            </p>
          </router-link>
        </b-navbar-item>
        <b-navbar-item v-if="view === 'network'" tag="div" style="margin-left: 25vw">
          <b-dropdown aria-role="list" class="mode-dropdown" label="Mode">
            <b-button
              slot="trigger"
              slot-scope="{ active }"
              size="is-small"
              type="is-light"
              class="system-background"
            >
              <span class="mode-title">{{ visMode }}</span>
              <font-awesome-icon
                :icon="active ? 'chevron-up' : 'chevron-down'"
                size="sm"
                class="font-awesome-icon"
                style="margin-left: 1rem"
              />
            </b-button>

            <b-dropdown-item aria-role="listitem" @click="$emit('switch-to-exploration')">
              Exploration
            </b-dropdown-item>
            <b-dropdown-item aria-role="listitem" @click="$emit('switch-to-comparison')">
              Comparison
            </b-dropdown-item>
            <b-dropdown-item aria-role="listitem" @click="$emit('switch-to-report')">
              Report Editor
            </b-dropdown-item>
          </b-dropdown>
        </b-navbar-item>
        <b-navbar-item v-if="view === 'report-viewer'" tag="div" style="margin-left: 25vw">
          <div class="report-title">
            <p>
              Case report:
              <span style="font-weight: 700">name of the case</span>
            </p>
          </div>
        </b-navbar-item>
      </template>

      <template slot="end">
        <b-navbar-item tag="div">
          <b-switch v-model="debugSwitchOn" :value="inDebug" size="is-small" @input="updateDebug">
            Debug
          </b-switch>
        </b-navbar-item>
        <b-navbar-item v-if="view === 'network'" tag="div">
          <!--     <b-button
              size="is-small"
              type="is-light"
              style="background-color: #e8eaee"
              @click="$emit('show-progress-tree')"
            >
              <div style="display: flex; align-items: center; justify-content: center">
                <span style="display:flex">
                  <ios-git-branch-icon style="font-size: 1.2rem; display: flex;" />
                </span>
              </div>
            </b-button>

            <p style="margin: -0.5rem 1rem 0 0">
              Branch
              <span style="color: #363636; font-weight: 500; margin-left: 0.2rem">
                {{ getBranchById(user.workspace.mainBranchId).name }}
              </span>
            </p>
            <b-modal
              :active.sync="isCreateNoteModalActive"
              has-modal-card
              trap-focus
              aria-role="dialog"
              aria-modal
            >
              <CreateCommitModal />
            </b-modal>
            <b-modal
              :active.sync="isCreateCommitModalActive"
              has-modal-card
              trap-focus
              aria-role="dialog"
              aria-modal
            >
              <CreateNoteModal />
            </b-modal>
            <b-button
              size="is-small"
              class="toolbar-button"
              outlined
              @click="isCreateCommitModalActive = true"
            >
              <div class="progressBar__button">
                <span style="display:flex">
                  <ios-git-commit-icon
                    style="font-size: 1.2rem; display: flex; margin-right: 0.5rem"
                  />
                  Create commit
                </span>
              </div>
            </b-button>

            <b-button
              size="is-small"
              class="toolbar-button"
              outlined
              @click="isCreateNoteModalActive = true"
            >
              <div class="progressBar__button">
                <b-icon pack="fas" icon="sticky-note" style="margin-right: 0.5rem" />
                <span>Create note</span>
              </div>
            </b-button> -->
          <b-button type="is-light" size="is-small" @click="$emit('show-dataset-editor')">
            Raw data
          </b-button>
          <b-button type="is-primary" size="is-small" @click="saveWorkspace">
            Save
          </b-button>
        </b-navbar-item>
        <b-navbar-item v-if="view !== 'report-viewer'">
          <p>
            <font-awesome-icon icon="user" class="fa-lg" style="margin-left: 0.5rem" />
            <font-awesome-icon icon="chevron-down" style="margin-left: 0.5rem" />
          </p>
        </b-navbar-item>
      </template>
    </b-navbar>
  </header>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  props: {
    view: {
      type: String,
      default: 'overview-dashboard'
    },
    visMode: {
      type: String,
      default: 'none'
    }
  },
  data() {
    return {
      debugSwitchOn: true,
      isCreateNoteModalActive: false,
      isCreateCommitModalActive: false
    }
  },

  computed: {
    ...mapState('interaction', ['inDebug']),
    ...mapGetters('workspace', ['getBranchById']),
    ...mapState('workspace', ['user'])
  },

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

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

<style lang="sass" scoped>
.toolbar
  height: 1.5rem
  background-color: $system-background-color
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2)
  user-select: none

.toolbar.navbar
  height: $toolbar-height

.toolbar .el-button
  pointer-events: auto

.navbar-text
  color: $secondary-text-color

a.navbar-item:hover
  background-color: #e5e5e5

.navbar p
  pointer-events: none
  font-size: $small-font-size
  color: $secondary-text-color

.logo
  color: $primary-text-color
  font-family: 'PT Sans', sans-serif
  font-weight: bold
  font-size: 1em
  margin: 1rem 0.5rem
  letter-spacing: 0.2rem

.mode-title
  text-transform: uppercase
  font-weight: 600
  letter-spacing: 0.1rem

.mode-dropdown
  background: $toolbar-color

.font-awesome-icon
  margin: 0em 0.5rem 0em 0rem
  opacity: 0.5
  color: $secondary-text-color

.toolbar-button
  background-color: #e8eaee
  border-color: #b6bcc9

.progressBar__button
  display: flex
  align-items: center
  justify-content: center

.report-title
  p
    font-size: 1.5rem
    color: #363636
</style>
