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

import { mapActions, mapGetters, mapState } from 'vuex';
import { GlAvatar, 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-bg-red-100', 'gl-text-red-700'],
      [severityGroupTypes.D]: ['gl-bg-orange-100', 'gl-text-orange-700'],
      [severityGroupTypes.C]: ['gl-bg-purple-light', 'gl-text-purple'],
      [severityGroupTypes.B]: ['gl-bg-gray-100', 'gl-text-gray-800'],
      [severityGroupTypes.A]: ['gl-bg-green-100', 'gl-text-green-700'],
    },
    severityLevels: {
      [severityLevels.CRITICAL]: ['gl-text-red-700'],
      [severityLevels.HIGH]: ['gl-text-orange-700'],
      [severityLevels.UNKNOWN]: ['gl-text-gray-800'],
      [severityLevels.MEDIUM]: ['gl-text-purple'],
      [severityLevels.LOW]: ['gl-text-gray-800'],
      [severityLevels.NONE]: ['gl-text-green-700'],
    },
  },
  accordionItemsContentMaxHeight: '445px',
  components: { Accordion, AccordionItem, GlLink, GlAvatar, 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="js-projects-security-status border rounded">
    <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="px-3">
      <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"
        >
          <template #title="{ isExpanded, isDisabled }"
            ><h5 class="d-flex align-items-center font-weight-normal p-0 m-0">
              <gl-avatar
                v-gl-tooltip
                :title="severityGroup.description"
                :entity-name="severityGroup.type"
                shape="circle"
                :size="32"
                class="mr-2 border-0 font-weight-bold"
                :class="cssForSeverityGroup(severityGroup)"
              />
              <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>
