<template>
  <div class="vulnerability-details">
    <div
      v-if="!details"
      class="loading"
    >
      <VueLoadingIndicator/>
    </div>

    <template v-else>
      <div class="pane-toolbar">
        <div class="title">
          {{ $t('org.vue.widgets.vulnerability.messages.attention', { n: details.vulnerabilities.length }) }}
        </div>

        <div class="summary">
          <div
            v-for="(severity, key) of severities"
            :key="key"
            :class="`severity-${severity.class}`"
            class="summary-item"
          >
            <VueIcon
              :icon="severity.icon"
              :class="severity.class"
            />
            <span class="count">{{ details.summary[key] }}</span>
            {{ $t(`org.vue.widgets.vulnerability.severity.${key}`) }}
          </div>
        </div>
      </div>

      <transition name="vue-ui-fade">
        <DynamicScroller
          v-if="showList"
          ref="scroller"
          class="items"
          :items="details.vulnerabilities"
          :min-item-size="75"
          v-slot="{ item, active }"
        >
          <DynamicScrollerItem
            :item="item"
            :active="active"
            :size-dependencies="[
              showMoreParentsMap[item.id]
            ]"
          >
            <VulnerabilityItem
              :item="item"
              :show-more-parents="showMoreParentsMap[item.id]"
              @toggle-more-parents="$set(showMoreParentsMap, item.id, !showMoreParentsMap[item.id])"
            />
          </DynamicScrollerItem>
        </DynamicScroller>
      </transition>
    </template>
  </div>
</template>

<script>
import VulnerabilityItem from './VulnerabilityItem.vue'

import { SEVERITIES } from './Vulnerability.vue'

export default {
  components: {
    VulnerabilityItem
  },

  sharedData () {
    return mapSharedData('org.vue.widgets.vulnerability.', {
      details: 'details'
    })
  },

  data () {
    return {
      showList: false,
      showMoreParentsMap: {}
    }
  },

  created () {
    this.severities = SEVERITIES
  },

  mounted () {
    // Animation breaks scroller item sizes
    setTimeout(() => {
      this.showList = true
    }, 200)
  }
}
</script>

<style lang="stylus" scoped>
@import "~@vue/cli-ui/src/style/imports"

.vulnerability-details
  v-box()

.pane-toolbar
  padding-bottom $padding-item

.summary
  display flex
  padding-right 12px

.summary-item
  display flex
  align-items center
  margin-left 16px

  .vue-ui-icon,
  .count
    margin-right 3px

  .count
    font-weight bold

.severity-danger
  color $vue-ui-color-danger
.severity-warning
  color $vue-ui-color-warning

.items
  flex 1
</style>
