<template>
  <div class="top-navigation">
    <img class="burger"
         src="@/assets/icons/three-bars.svg"
         alt="Menü"
         v-if="!window.wide"
         :class="{ rotation: window.menu }"
         @click="$emit('side', null)">

    <div class="name"
         :class="{project: projectLoaded}"
         @click="$emit('close', true)">
      <span>&lt;</span>
      {{ title }}
    </div>

    <div class="jobs" :class="{colored: show}" @click="showJobs">
      <template v-if="failedJobCount > 0">
        {{ failedJobCount }} {{ failedJobCount === 1 ? 'job' : 'jobs' }} failed
      </template>
      <template v-else>
        {{ runningJobCount }} {{ runningJobCount === 1 ? 'job' : 'jobs' }} running
      </template>
    </div>

    <job-window v-if="show"
                @close="show=false"
                :jobs="activeJobs"/>
  </div>
</template>

<script>
import JobWindow from "@/components/window/job-window";

export default {
  name: "top-navigation-bar",
  components: {JobWindow},
  props: ['window'],
  created: function () {
    // get jobs
    this.getJobs();

    // subscribe to changes
    this.$root.socket.on('connect', this.getJobs);
    this.$root.socket.on('create-job', this.addJob);
    this.$root.socket.on('remove-job', this.removeJob);
    this.$root.socket.on('edit-job', this.editJob);
  },
  destroyed: function () {
    this.$root.socket.off('connect', this.getJobs);
    this.$root.socket.off('create-job', this.addJob);
    this.$root.socket.off('remove-job', this.removeJob);
    this.$root.socket.off('edit-job', this.editJob);
  },
  data: function () {
    return {
      jobs: [],
      show: false
    }
  },
  computed: {
    projectLoaded: function () {
      return this.$root.project || this.window.content === 'about';
    },
    title: function () {
      if (this.window.content === 'about')
        return 'About PyCS';
      else if (this.projectLoaded)
        return this.$root.project.name;
      else
        return 'PyCS';
    },
    activeJobs: function () {
      if (!this.$root.project)
        return this.jobs;
      else
        return this.jobs.filter(j => j['project_id'] === this.$root.project.identifier);
    },
    activeJobCount: function () {
      return this.activeJobs.length;
    },
    runningJobCount: function () {
      return this.activeJobs.filter(j => !j.finished).length;
    },
    failedJobCount: function () {
      return this.activeJobs.filter(j => j.exception).length;
    }
  },
  methods: {
    showJobs: function () {
      if (this.show)
        this.show = false;
      else if (this.activeJobCount > 0)
        this.show = true;
    },
    getJobs: function () {
      this.$root.socket.get('/jobs')
          .then(response => response.json())
          .then(jobs => {
            this.jobs = [];
            jobs.forEach(this.addJob)
          });
    },
    addJob: function (job) {
      for (let j of this.jobs)
        if (j.identifier === job.identifier)
          return;

      this.jobs.push(job);
    },
    removeJob: function (job) {
      for (let i = 0; i < this.jobs.length; i++) {
        if (this.jobs[i].identifier === job.identifier) {
          this.jobs.splice(i, 1);
          return;
        }
      }
    },
    editJob: function (job) {
      for (let i = 0; i < this.jobs.length; i++) {
        if (this.jobs[i].identifier === job.identifier) {
          this.$set(this.jobs, i, job);
          return;
        }
      }
    }
  },
  watch: {
    activeJobCount: function (newVal) {
      if (newVal === 0) {
        this.show = false;
      }
    }
  }
}
</script>

<style scoped>
.top-navigation {
  background-color: #3f3f3f;
  color: whitesmoke;
  display: flex;

  flex-direction: row;
  align-items: center;
  position: relative;
}

.burger {
  transition: transform 0.6s;
  filter: invert(1);
  width: 2rem;
  margin-left: 0.75rem;
}

.burger.rotation {
  transform: rotate(90deg);
}

.name {
  font-weight: bold;
  font-family: "Roboto Condensed", sans-serif;
  padding: 1rem;
  flex-grow: 1;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.name.project {
  cursor: pointer;
}

.name > span {
  margin-right: 0.3rem;
}

.name:not(.project) > span {
  display: none;
}

.jobs {
  font-family: "Roboto Condensed", sans-serif;
  white-space: nowrap;
  padding: 1rem;
  cursor: pointer;
}

.jobs.colored {
  color: var(--secondary);
}
</style>