<template>
    <div class="topbar d-flex flex-row">
        <div @click="toggleSidebar">
            <i class="ui-element menubutton fa fa-bars"></i>
        </div>
        <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle">
            <div class="input-group-prepend shadow">
                <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel" for="search">
                    <i class="fa fa-search"></i>
                </span>
            </div>
            <input v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar">
        </div>
        <div v-if="routeName == 'mainview'" class="splitbutton">
            <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
        </div>
        <div class="">
            <Layers v-if="routeName == 'mainview'"></Layers>
        </div>
        <div class="">
            <Identify v-if="routeName == 'mainview'"></Identify>
        </div>
    </div>
</template>

<style lang="scss">
.splitbutton {
  height: $icon-height;
}
.splitscreen {
  background-color: white;
  padding: $small-offset;
  margin-right: $small-offset;
  margin-left: $offset;
  border-radius: $border-radius;
  height: $icon-height;
  width: $icon-width;
}

.menubutton {
  background-color: white;
  padding: $small-offset;
  border-radius: $border-radius;
  margin-left: $offset;
  height: $icon-height;
  width: $icon-width;
}

.searchcontainer {
  height: $icon-height;
  border-radius: 0.25rem;
}

.searchbar-expanded {
  margin-left: 22vw;
  margin-right: auto;
  width: $searchbar-width !important;
}

.searchbar-collapsed {
  margin-left: auto;
  margin-right: $small-offset;
  width: $icon-width !important;
  transition: $transition-fast;
}

.searchbar {
  margin-left: auto;
  margin-right: auto;
  height: $icon-height !important;
}

.searchlabel {
  background-color: white !important;
}

.topbar {
  padding-top: $offset;
  margin-right: $offset;
}

.logout {
  font-size: x-large;
}
</style>


<script>
import debounce from 'lodash.debounce'

import Layers from "../layers/Layers";
import Identify from "../layers/Identify";

export default {
  name: "topbar",
  components: {
    Identify: Identify,
    Layers: Layers
  },
  data() {
    return {
      searchbarCollapsed: true,
      searchQuery: "",
      searchQueryIsDirty: false,
      isSearching: false
    };
  },
  computed: {
    searchIndicator: function () {
      if (this.isSearching) {
        return '⟳';
      } else if (this.searchQueryIsDirty) {
        return '';
      } else {
        return '✓';
      }
    },
    searchbarContainerStyle() {
      return {
        "input-group": true,
        searchcontainer: true,
        "searchbar-collapsed": this.searchbarCollapsed,
        "searchbar-expanded": !this.searchbarCollapsed
      };
    }
  },
  props: ["routeName"],
  watch: {
    searchQuery: function() {
      this.searchQueryIsDirty = true;
      this.doSearch();
    }
  },
  methods: {
    doSearch: debounce(function() {
      this.isCalculating = true;
      console.log("Would start search of", this.searchQuery);
      this.isCalculating = false;
      this.searchQueryIsDirty = false;
      }, 500
    ),
    toggleSearchbar() {
      this.searchbarCollapsed = !this.searchbarCollapsed;
    },
    toggleSidebar() {
      this.$store.commit("application/toggleSidebar");
    },
    splitScreen() {
      this.$store.commit("application/toggleSplitScreen");
    }
  }
};
</script>