<script>
import { s__, __ } from '~/locale';
import { GlEmptyState, GlLink, GlSkeletonLoading, GlTable } from '@gitlab/ui';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';

export default {
  name: 'VulnerabilityList',
  components: {
    GlEmptyState,
    GlLink,
    GlSkeletonLoading,
    GlTable,
    SeverityBadge,
  },
  props: {
    dashboardDocumentation: {
      type: String,
      required: true,
    },
    emptyStateSvgPath: {
      type: String,
      required: true,
    },
    vulnerabilities: {
      type: Array,
      required: true,
    },
    isLoading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  methods: {
    vulnerabilityPath({ id, path }) {
      // Since there's no way to get this from the current data, I'll have to make it up.
      // It will be available shortly though, so there's a fall-forward to use it once it's available
      // We should remove this method once it's fully available.
      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/25740
      return path || `vulnerabilities/${id}`;
    },
  },
  fields: [
    {
      key: 'state',
      label: s__('Vulnerability|Status'),
      thClass: 'gl-w-64',
    },
    {
      key: 'severity',
      label: s__('Vulnerability|Severity'),
      thClass: 'gl-w-64',
    },
    {
      key: 'title',
      label: __('Description'),
    },
  ],
};
</script>

<template>
  <gl-table
    :busy="isLoading"
    :fields="$options.fields"
    :items="vulnerabilities"
    stacked="sm"
    show-empty
    responsive
  >
    <template #cell(state)="{ item }">
      <span class="text-capitalize js-status">{{ item.state }}</span>
    </template>

    <template #cell(severity)="{ item }">
      <severity-badge class="js-severity" :severity="item.severity" />
    </template>

    <template #cell(title)="{ item }">
      <gl-link class="text-body js-description" :href="vulnerabilityPath(item)">{{
        item.title
      }}</gl-link>
    </template>

    <template #table-busy>
      <gl-skeleton-loading v-for="n in 10" :key="n" class="m-2 js-skeleton-loader" :lines="2" />
    </template>

    <template #empty>
      <slot name="emptyState">
        <gl-empty-state
          :title="s__(`We've found no vulnerabilities`)"
          :description="
            s__(
              `While it's rare to have no vulnerabilities, it can happen. In any event, we ask that you please double check your settings to make sure you've set up your dashboard correctly.`,
            )
          "
        />
      </slot>
    </template>
  </gl-table>
</template>
