<template>
  <div
    id="overseer-notifications"
    :style="deriveNotificationCSS(showNotifications)"
  >
    <div
      v-for="scan in activeScans"
      :key="scan.id"
      class="overseer-notification"
      @click="navigateToScan(scan)"
    >
      <div style="float: left; width: 100%; margin: 5px 0px;">
        <b style="float: left;">{{ scan.target }}</b>
        <b style="float: right;">{{ scan.status }}</b>
      </div>
      <ScanProgress
        :percentage="scan.status =='COMPLETE' ? 100 : scan.total_progress"
        style="margin-top: 5px;"
      />
    </div>
  </div>
</template>

<script>
import ScanProgress from '../components/ScanProgress.vue'

export default {
    name: 'OverseerNotifications',
    components: {
        ScanProgress,
    },
    data() {
        return {
            showNotifications: true
        }
    },
    computed: {
        activeScans() {
            return this.$store.state.notifications
        }
    },
    mounted() {
        // Sets up listener for toggleNotification event
        this.$root.$on("toggleNotifications", () => {
            this.showNotifications = !this.showNotifications;
        });
    },
    methods: {
        /**
         * Routes the user to the provided scan.
         **/
        navigateToScan(scan) {
            this.$router.push({ path: `/scan/${scan.target}/${scan.id}` })
        },
        /**
         * Derives notification drawer CSS to open / close.
         **/
        deriveNotificationCSS(showNotifications) {
            return {
                "right": showNotifications ? "0px" : "-320px"
            }
        }
    }
}
</script>

<style scoped>
#overseer-notifications {
    height: calc(100% - 60px);
    width: 320px;
    position: fixed;
    transition: 0.5s;
    right: 0px;
    top: 0px;
    overflow: scroll;
    margin-top: 60px;
    z-index: 1;
}

.overseer-notification {
    transition: 0.5s;
    background-color: #E0E3DE;
    border-radius: 2px;
    text-align: start;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}
</style>
