<script>
import { vulnerabilitiesSeverityCountScopes } from '../constants';
import vulnerabilitySeveritiesCountQuery from '../graphql/queries/vulnerability_severities_count.query.graphql';
import VulnerabilityCountListLayout from './vulnerability_count_list_layout.vue';

export default {
  components: {
    VulnerabilityCountListLayout,
  },
  props: {
    scope: {
      type: String,
      required: true,
      validator: (value) => Object.values(vulnerabilitiesSeverityCountScopes).includes(value),
    },
    fullPath: {
      type: String,
      required: false,
      default: '',
    },
    filters: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  data() {
    return {
      queryError: false,
      vulnerabilitiesCount: {},
    };
  },
  computed: {
    isLoading() {
      return this.$apollo.queries.vulnerabilitiesCount.loading;
    },
  },
  apollo: {
    vulnerabilitiesCount: {
      query: vulnerabilitySeveritiesCountQuery,
      variables() {
        const { scope, fullPath } = this;
        const { instance, group, project } = vulnerabilitiesSeverityCountScopes;
        return {
          fullPath,
          isInstance: scope === instance,
          isGroup: scope === group,
          isProject: scope === project,
          ...this.filters,
        };
      },
      update(data) {
        return data[this.scope]?.vulnerabilitySeveritiesCount || {};
      },
      result() {
        this.queryError = false;
      },
      error() {
        this.queryError = true;
      },
    },
  },
};
</script>

<template>
  <vulnerability-count-list-layout
    :show-error="queryError"
    :is-loading="isLoading"
    :vulnerabilities-count="vulnerabilitiesCount"
  />
</template>
