<script>
import { mapGetters, mapState } from 'vuex';
import VulnerabilityCount from './vulnerability_count.vue';
import { CRITICAL, HIGH, MEDIUM, LOW } from '../store/modules/vulnerabilities/constants';

const SEVERITIES = [CRITICAL, HIGH, MEDIUM, LOW];

export default {
  name: 'VulnerabilityCountList',
  components: {
    VulnerabilityCount,
  },
  computed: {
    ...mapGetters('vulnerabilities', ['dashboardCountError', 'dashboardError']),
    ...mapState('vulnerabilities', ['isLoadingVulnerabilitiesCount', 'vulnerabilitiesCount']),
    counts() {
      return SEVERITIES.map(severity => {
        const count = this.vulnerabilitiesCount[severity] || 0;
        return { severity, count };
      });
    },
  },
};
</script>

<template>
  <div class="vulnerabilities-count-list">
    <div class="flash-container">
      <div v-if="dashboardError" class="flash-alert">
        <div class="flash-text container-fluid container-limited limit-container-width">
          {{
            s__(
              'Security Dashboard|Error fetching the dashboard data. Please check your network connection and try again.',
            )
          }}
        </div>
      </div>
    </div>

    <div class="row">
      <div v-for="count in counts" :key="count.severity" class="col-md col-sm-6 js-count">
        <vulnerability-count
          :severity="count.severity"
          :count="count.count"
          :is-loading="isLoadingVulnerabilitiesCount"
        />
      </div>
    </div>

    <div class="flash-container">
      <div v-if="dashboardCountError" class="flash-alert">
        <div class="flash-text container-fluid container-limited limit-container-width">
          {{
            s__(
              'Security Dashboard|Error fetching the vulnerability counts. Please check your network connection and try again.',
            )
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.vulnerabilities-count-list {
  display: block;
  padding: 2.5em 0 1.5em;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 3px;
}
</style>
