<template>
  <b-nav-item-dropdown no-caret right>
    <template slot="button-content">
      <font-awesome-icon icon="tachometer-alt" /> CPU
      <b-progress :value="status" height=".5rem" :variant="percentageClass"></b-progress>
    </template>
    <b-dropdown-header class="text-center">CPU</b-dropdown-header>
    <div class="text-center">
      <small>{{ cpuName }}</small>
      <br />
      <span :class="'badge badge-' + percentageClass">{{ formattedPercentage }}%</span>
    </div>
    <div class="text-center">
      <template v-for="(temp, id) in temperatures">
        <span :class="'badge badge-' + badgeClass(temp.temperature)" :title="temp.name">{{ temp.temperature }}C</span>&nbsp;
      </template>
    </div>
  </b-nav-item-dropdown>
</template>

<script>
  export default {
    name: 'cpu_status',
    props: [ 'status', 'cpuName', 'temperatures' ],
    computed: {
      formattedPercentage: function() {
        if (!this.status) {
          return '0.00';
        }
        return parseFloat(this.status).toFixed(2);
      },
      percentageClass: function() {
        if (this.status >= 90) {
          return 'danger';
        } else if (this.status >= 80) {
          return 'warning';
        }
        return 'success'
      },
    },
    methods: {
      badgeClass: function(temp) {
        if (temp >= 90) {
          return 'danger';
        } else if (temp >= 70) {
          return 'warning';
        } else if (temp >= 60) {
          return 'high';
        } else if (temp >= 50) {
          return 'success';
        } else if (temp >= 40) {
          return 'acceptable';
        } else if (temp >= 30) {
          return 'cool';
        }
        return 'cold';
      },
    }
  }
</script>
