<template>
  <div id="overseer-header">
    <router-link to="/">
      <div
        v-if="this.$store.state.ws_connected"
        id="overseer-websocket"
        style="background-color: #0E6A0E;"
      />
      <div
        v-if="!this.$store.state.ws_connected"
        id="overseer-websocket"
        style="background-color: #B30000;"
      />
      <div style="float: left; margin: 8px 20px; font-weight: 700; font-size: 2em;">
        Overseer
      </div>
    </router-link>
    <div
      style="float: right; margin: 10px 20px; cursor: pointer;"
      @click="toggleNotifications()"
    >
      <p style="color: white; position: absolute; font-weight: 700; width: 35px; height: 35px; margin: 9px 0px; font-size: .8em;">
        {{ notificationCount }}
      </p>
      <svg
        style="width:35px; height:35px;"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z"
        />
      </svg>
    </div>
  </div>
</template>

<script>
export default {
    name: 'OverseerHeader',
    computed: {
        notificationCount() {
            return this.$store.state.notifications.length
        }
    },
    methods: {
        /**
         * Emits a notification to the Notification component.
         **/
        toggleNotifications() {
            this.$root.$emit("toggleNotifications");
        }
    }
}
</script>

<style scoped>
#overseer-websocket {
    height: 18px;
    width: 18px;
    border-radius: 8px;
    position: absolute;
    left: 25px;
    top: 20px;
    z-index: -1;
}
#overseer-header {
    background-color: #C9582C;
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
}

#overseer-header a {
    color: inherit;
}
</style>
