<template>
  <v-toolbar fixed class="py-2">
    <v-layout justify-space-between align-center>

      <v-flex d-inline-flex xs4 text-xs-left>
        <!-- Logo -->
        <img
          :src="logo"
          class="logo-icon my-2"
          @click="goHome">
        <h1
          class="page-title font-weight-thin my-2 ml-3 display-2 primary--text"
          @click="goHome">
          {{ name }}
        </h1>

        <SearchInput
          v-if="!areAllPanelsHidden"
          :search-text="searchText"
          enable-hot-key
          class="mx-3 pa-2 xs12 main-search-input"
          placeholder="Search by: project, patients, application or keywords."
          data-test="main-search-input"
          @change-search-text="onChangeSearchText"/>
      </v-flex>

      <v-flex
        v-if="isAuthenticated"
        class="navbar-actions"
        align-center
        xs9>

        <v-speed-dial
          v-model="showProfileActions"
          open-on-hover
          direction="left"
          color="primary"
          transition="slide-x-transition">

          <v-btn
            slot="activator"
            v-model="showProfileActions"
            class="main-btn"
            color="primary"
            dark
            fab>
            <!-- <v-icon>account_circle</v-icon> -->
            <v-avatar size="56px" class="nav-profile">
              <img
                :src="getProfile.picture"
                alt="Avatar">
            </v-avatar>
            <v-icon>close</v-icon>
          </v-btn>

          <v-btn
            v-if="permissions.includes('add_project')"
            fab
            dark
            color="primary"
            @click="addNewProject">
            <v-tooltip bottom>
              <v-icon
                slot="activator"
                class="white--text close"
                dark>
                add
              </v-icon>
              <span>Create New Project</span>
            </v-tooltip>
          </v-btn>

          <v-btn
            fab
            dark
            color="primary"
            @click="editProfile">
            <v-tooltip bottom>
              <v-icon
                slot="activator"
                class="white--text close"
                dark>
                settings
              </v-icon>
              <span>Edit Profile</span>
            </v-tooltip>
          </v-btn>

          <v-btn
            fab
            dark
            color="primary"
            @click="logout">
            <v-tooltip bottom>
              <v-icon
                slot="activator"
                class="white--text close"
                dark>
                transit_enterexit
              </v-icon>
              <span>Logout</span>
            </v-tooltip>
          </v-btn>

        </v-speed-dial>
      </v-flex>

    </v-layout>
  </v-toolbar>
</template>

<script>
import { mapGetters } from 'vuex'
import SearchInput from '@/components/search/SearchInput.vue'
import Settings from '@/utils/settings'

import { ADD_NEW_PROJECT, EDIT_PROFILE } from '@/store/actions/modals'
import { AUTH_LOGOUT } from '@/store/actions/auth'
import { HIDE_ALL_PANELS } from '@/store/actions/panels'

const { name, logo } = Settings()

export default {
  name: 'NavBar',
  components: {
    SearchInput
  },
  data () {
    return {
      name,
      logo,
      showProfileActions: false
    }
  },
  computed: {
    ...mapGetters([
      'areAllPanelsHidden',
      'isAuthenticated',
      'searchText',
      'getProfile',
      'permissions'
    ])
  },
  methods: {
    onChangeSearchText (searchText) {
      this.$store.commit('setQueryParams', { search: searchText })
      this.$store.commit('setPanelsVisibility', { search: true })
    },
    goHome () {
      this.$store.dispatch(HIDE_ALL_PANELS).then(() => {
        this.$router.push({ name: 'home', query: {} })
      })
    },
    addNewProject () {
      this.$store.dispatch(ADD_NEW_PROJECT)
    },
    editProfile () {
      this.$store.dispatch(EDIT_PROFILE)
    },
    logout: function () {
      this.showProfileActions = false
      this.$store.dispatch(HIDE_ALL_PANELS).then(() => {
        this.$store.dispatch(AUTH_LOGOUT)
      })
    }
  }
}
</script>

<style lang="scss">
.page-title {
  cursor: pointer;
}
.v-toolbar {
  background-color: transparent !important;
  box-shadow: none !important;
}
.navbar-actions .v-icon {
  font-size: 28px !important;
  margin-left: 8px;
  margin-right: 8px;
  cursor: pointer;
}
.v-speed-dial {
  width: 80px;
  margin-left: auto;
  .main-btn .v-icon {
    left: -8px !important;
  }
}
.main-search-input {
  min-width: 400px;
  .v-text-field .v-label {
    max-width: 95%;
  }
  .search-input {
    margin-bottom: 12px;
  }
}
</style>
