<script>
import { GlAlert } from '@gitlab/ui';
import { SEVERITIES } from '../store/modules/vulnerabilities/constants';
import VulnerabilityCount from './vulnerability_count.vue';

export default {
  components: {
    VulnerabilityCount,
    GlAlert,
  },
  props: {
    showError: {
      type: Boolean,
      required: false,
      default: false,
    },
    isLoading: {
      type: Boolean,
      required: false,
      default: false,
    },
    vulnerabilitiesCount: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showAlert: this.showError,
    };
  },
  computed: {
    counts() {
      return SEVERITIES.map(severity => ({
        severity,
        count: this.vulnerabilitiesCount[severity] || 0,
      }));
    },
  },
  methods: {
    onErrorDismiss() {
      this.showAlert = false;
    },
  },
};
</script>

<template>
  <div class="vulnerabilities-count-list mt-4">
    <gl-alert v-if="showAlert" class="mb-4" variant="danger" @dismiss="onErrorDismiss">
      {{
        s__(
          'SecurityReports|Error fetching the vulnerability counts. Please check your network connection and try again.',
        )
      }}
    </gl-alert>
    <div class="row">
      <div v-for="count in counts" :key="count.severity" class="mb-5 col-md col-sm-6">
        <vulnerability-count
          :severity="count.severity"
          :count="count.count"
          :is-loading="isLoading"
        />
      </div>
    </div>
  </div>
</template>
