<script>
import {
  severityGroupTypes,
  severityLevels,
  severityLevelsTranslations,
} from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';

import { mapActions, mapGetters, mapState } from 'vuex';
import { GlLink, GlTooltipDirective } from '@gitlab/ui';

import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
import Icon from '~/vue_shared/components/icon.vue';

export default {
  css: {
    severityGroups: {
      [severityGroupTypes.F]: 'gl-text-red-900',
      [severityGroupTypes.D]: 'gl-text-red-700',
      [severityGroupTypes.C]: 'gl-text-orange-600',
      [severityGroupTypes.B]: 'gl-text-orange-400',
      [severityGroupTypes.A]: 'gl-text-green-500',
    },
    severityLevels: {
      [severityLevels.CRITICAL]: 'gl-text-red-900',
      [severityLevels.HIGH]: 'gl-text-red-700',
      [severityLevels.UNKNOWN]: 'gl-text-gray-300',
      [severityLevels.MEDIUM]: 'gl-text-orange-600',
      [severityLevels.LOW]: 'gl-text-orange-500',
      [severityLevels.NONE]: 'gl-text-green-500',
    },
  },
  accordionItemsContentMaxHeight: '445px',
  components: { Accordion, AccordionItem, GlLink, Icon },
  directives: {
    'gl-tooltip': GlTooltipDirective,
  },
  props: {
    endpoint: {
      type: String,
      required: true,
    },
    helpPagePath: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    ...mapState('vulnerableProjects', ['isLoading']),
    ...mapGetters('vulnerableProjects', ['severityGroups']),
  },
  created() {
    this.fetchProjects(this.endpoint);
  },
  methods: {
    ...mapActions('vulnerableProjects', ['fetchProjects']),
    shouldAccordionItemBeDisabled({ projects }) {
      return projects && projects.length < 1;
    },
    cssForSeverityGroup({ type }) {
      return this.$options.css.severityGroups[type];
    },
    cssForMostSevereVulnerability({ level }) {
      return this.$options.css.severityLevels[level] || [];
    },
    severityText(severityLevel) {
      return severityLevelsTranslations[severityLevel];
    },
  },
};
</script>

<template>
  <section
    class="gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-display-flex gl-flex-direction-column"
  >
    <header class="border-bottom p-3">
      <h4 class="my-0">
        {{ __('Project security status') }}
        <gl-link
          v-if="helpPagePath"
          :href="helpPagePath"
          :aria-label="__('Project security status help page')"
          target="_blank"
          ><icon name="question"
        /></gl-link>
      </h4>
      <p class="text-secondary m-0">
        {{ __('Projects are graded based on the highest severity vulnerability present') }}
      </p>
    </header>
    <accordion class="security-dashboard-accordion gl-px-3 gl-display-flex gl-flex-fill-1">
      <template #default="{ accordionId }">
        <accordion-item
          v-for="severityGroup in severityGroups"
          :ref="`accordionItem${severityGroup.type}`"
          :key="severityGroup.type"
          :accordion-id="accordionId"
          :is-loading="isLoading"
          :disabled="shouldAccordionItemBeDisabled(severityGroup)"
          :max-height="$options.accordionItemsContentMaxHeight"
          class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-justify-content-center"
        >
          <template #title="{ isExpanded, isDisabled }">
            <h5 class="d-flex align-items-center font-weight-normal p-0 m-0">
              <span
                v-gl-tooltip
                :title="severityGroup.description"
                class="font-weight-bold mr-3 gl-font-lg"
                :class="cssForSeverityGroup(severityGroup)"
              >
                {{ severityGroup.type }}
              </span>
              <span :class="{ 'font-weight-bold': isExpanded, 'text-secondary': isDisabled }">
                {{ n__('%d project', '%d projects', severityGroup.projects.length) }}
              </span>
            </h5>
          </template>
          <template #subTitle>
            <p class="m-0 ml-5 pb-1 text-secondary">{{ severityGroup.warning }}</p>
          </template>
          <div class="ml-5 pb-2">
            <ul class="list-unstyled py-1">
              <li v-for="project in severityGroup.projects" :key="project.id" class="py-2">
                <gl-link target="_blank" :href="`${project.fullPath}/security/dashboard`">{{
                  project.fullName
                }}</gl-link>
                <span
                  v-if="project.mostSevereVulnerability"
                  ref="mostSevereCount"
                  class="d-block text-lowercase"
                  :class="cssForMostSevereVulnerability(project.mostSevereVulnerability)"
                  >{{ project.mostSevereVulnerability.count }}
                  {{ severityText(project.mostSevereVulnerability.level) }}
                </span>
              </li>
            </ul>
          </div>
        </accordion-item>
      </template>
    </accordion>
  </section>
</template>
