<script>
import { GlFriendlyWrap } from '@gitlab/ui';
import SafeLink from 'ee/vue_shared/components/safe_link.vue';
import Icon from '~/vue_shared/components/icon.vue';
import SeverityBadge from './severity_badge.vue';

export default {
  name: 'VulnerabilityDetails',
  components: {
    GlFriendlyWrap,
    Icon,
    SafeLink,
    SeverityBadge,
  },
  props: {
    details: {
      type: Object,
      required: true,
    },
  },
  methods: {
    hasMoreValues(index, values) {
      return index < values.length - 1;
    },
    hasValue(field) {
      return field.value && field.value.length > 0;
    },
    hasInstances(key) {
      return key === 'instances';
    },
    hasIdentifiers(key) {
      return key === 'identifiers';
    },
    hasLinks(key) {
      return key === 'links';
    },
    hasSeverity(key) {
      return key === 'severity';
    },
  },
};
</script>

<template>
  <div class="border-white mb-0 px-3">
    <div v-for="(field, key, index) in details" :key="index" class="d-sm-flex my-sm-2 my-4">
      <label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ field.text }}:</label>
      <div class="col-sm-10 pl-0 text-secondary">
        <template v-if="hasValue(field)">
          <div v-if="hasInstances(key)" class="info-well">
            <ul class="report-block-list">
              <li v-for="(instance, i) in field.value" :key="i" class="report-block-list-issue">
                <div class="report-block-list-icon append-right-5 failed">
                  <icon :size="32" name="status_failed_borderless" />
                </div>
                <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
                  <div class="report-block-list-issue-description-text">
                    {{ instance.method }}
                  </div>
                  <div class="report-block-list-issue-description-link">
                    <safe-link
                      :href="instance.uri"
                      target="_blank"
                      rel="noopener noreferrer nofollow"
                      class="break-link"
                    >
                      {{ instance.uri }}
                    </safe-link>
                  </div>
                  <expand-button v-if="instance.evidence">
                    <pre
                      slot="expanded"
                      class="block report-block-dast-code prepend-top-10 report-block-issue-code"
                    >
                    {{ instance.evidence }}</pre
                    >
                  </expand-button>
                </div>
              </li>
            </ul>
          </div>
          <template v-else-if="hasIdentifiers(key)">
            <span v-for="(identifier, i) in field.value" :key="i">
              <safe-link
                v-if="identifier.url"
                :class="`js-link-${key}`"
                :href="identifier.url"
                target="_blank"
                rel="noopener noreferrer"
              >
                {{ identifier.name }}
              </safe-link>
              <span v-else> {{ identifier.name }} </span>
              <span v-if="hasMoreValues(i, field.value)">,&nbsp;</span>
            </span>
          </template>
          <template v-else-if="hasLinks(key)">
            <span v-for="(link, i) in field.value" :key="i">
              <safe-link
                :class="`js-link-${key}`"
                :href="link.url"
                target="_blank"
                rel="noopener noreferrer"
              >
                {{ link.value || link.url }}
              </safe-link>
              <span v-if="hasMoreValues(i, field.value)">,&nbsp;</span>
            </span>
          </template>
          <template v-else-if="hasSeverity(key)">
            <severity-badge :severity="field.value" class="d-inline" />
          </template>
          <template v-else>
            <safe-link
              v-if="field.isLink"
              :class="`js-link-${key}`"
              :href="field.url"
              target="_blank"
            >
              <gl-friendly-wrap :text="field.value" />
            </safe-link>
            <gl-friendly-wrap
              v-else
              :text="field.value"
              :class="{ 'text-capitalize': key === 'confidence' }"
            />
          </template>
        </template>
      </div>
    </div>
  </div>
</template>
