<template>
  <div class="side-navigation"
       :class="{
         wide: window.wide,
         narrow: !window.wide,
         active: window.menu ,
         collapsed: width === 'collapsed'
       }">
    <div class="items">
      <div class="item"
           :class="{active: window.content === 'settings', inactive: !currentProject}"
           @click="ifProjectIsOpened(show, currentProject,'settings')">
        <img alt="Project" src="@/assets/icons/gear.svg">
        <span>Project</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'add_data', inactive: !currentProject}"
           @click="ifProjectIsOpened(show, currentProject, 'add_data')">
        <img alt="Data" src="@/assets/icons/package-dependencies.svg">
        <span>Data</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'labels', inactive: !currentProject || !labelsEnabled}"
           @click="ifProjectIsOpened(show, currentProject && labelsEnabled,'labels')">
        <img alt="Labels" src="@/assets/icons/tag.svg">
        <span>Labels</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'view_data', inactive: !currentProject}"
           @click="ifProjectIsOpened(show, currentProject,'view_data')">
        <img alt="Session" src="@/assets/icons/file-media.svg">
        <span>Session</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'about'}"
           @click="show('about')">
        <img alt="About" src="@/assets/icons/info.svg">
        <span>About</span>
      </div>

      <div v-if="window.wide"
           class="item"
           :class="{rotate: this.width === 'extended'}"
           @click="collapse">
        <img src="@/assets/icons/paper-airplane.svg">
        <span>Collapse</span>
      </div>
    </div>

    <!-- clickable overlay -->
    <div class="overlay"
         v-if="!window.wide"
         @click="closeSelf"/>
  </div>
</template>

<script>
export default {
  name: "side-navigation-bar",
  props: ['window'],
  created: function () {
    // read collapse status from local storage
    if (!localStorage.getItem('sidebar'))
      localStorage.setItem('sidebar', 'extended');

    this.width = localStorage.getItem('sidebar');
  },
  data: function () {
    return {
      width: null,
      model: null
    }
  },
  watch: {
    currentProject: function (newVal) {
      if (newVal) {
        this.$root.socket.get(`/projects/${newVal.identifier}/model`)
            .then(response => response.json())
            .then(model => this.model = model);
      } else {
        this.model = null;
      }
    }
  },
  computed: {
    currentProject: function () {
      return this.$root.project;
    },
    labelsEnabled: function () {
      return this.model
          && (
              this.model.supports.includes('labeled-images')
              || this.model.supports.includes('labeled-bounding-boxes')
          );
    }
  },
  methods: {
    closeSelf: function () {
      this.$emit('close', null);
    },
    show: function (value) {
      this.window.content = value;
      this.closeSelf();
    },
    collapse: function () {
      if (this.width === 'extended')
        this.width = 'collapsed';
      else
        this.width = 'extended';

      localStorage.setItem('sidebar', this.width);
      window.dispatchEvent(new Event('resize'));
    },
    ifProjectIsOpened: function (fun, additional, ...args) {
      if (this.currentProject && additional)
        fun.bind(fun)(...args);
    }
  }
}
</script>

<style scoped>
.side-navigation {
  color: whitesmoke;
}

.side-navigation.wide {
  flex-grow: 0;
  height: 100%;
}

.side-navigation.narrow {
  width: 100vw;
  left: -100vw;
  position: absolute;
  top: 0;
  bottom: 0;
  transition: 0.2s ease-out;

  display: flex;
  z-index: 1000;
}

.side-navigation.narrow.active {
  left: 0;
}

.items {
  flex-grow: 0;
  height: 100%;
  background-color: #2f2f2f;
  min-width: 66%;
}

.item {
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.item:hover:not(.inactive) {
  background-color: #292929;
}

.item.active:not(.inactive) {
  background-color: #1f1f1f;
}

.item.inactive {
  color: #7f7f7f;
}

.item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.item img {
  width: 1.2rem;
  margin-left: 1rem;
  filter: invert(1);
}

.item.rotate img {
  transform: rotate(180deg);
}

.item.inactive img {
  opacity: 0.5;
}

.item span {
  margin: 1rem 4rem 1rem 0.75rem
}

.side-navigation.wide.collapsed .item {
  padding: 1rem 1rem 1rem 0;
}

.side-navigation.wide.collapsed .item span {
  display: none;
}

.overlay {
  flex-grow: 1;
}
</style>
