<template>
  <div class="vulnerability-item list-item">
    <div class="wrapper">
      <ItemLogo
        :image="severity.icon"
        :class="severity.class"
      />

      <div class="main-infos">
        <ListItemInfo
          :link="item.moreInfo"
        >
          <template slot="name">
            <span class="name">{{ item.name }}</span>
            <span class="version">{{ item.version }}</span>
          </template>

          <template slot="description">
            <span
              class="severity"
              :class="severity.class"
            >
              {{ $t(`org.vue.widgets.vulnerability.severity.${item.severity}`) }}
            </span>
            <span class="title" v-tooltip="item.message">
              {{ item.title }}
            </span>
          </template>
        </ListItemInfo>

        <div class="info-versions">
          <div class="info-version">
            <VueIcon icon="error"/>
            {{ $t('org.vue.widgets.vulnerability.versions.vulnerable') }}
            <span class="version">{{ item.versions.vulnerable }}</span>
          </div>
          <div class="info-version">
            <VueIcon icon="check_circle"/>
            {{ $t('org.vue.widgets.vulnerability.versions.patched') }}
            <span class="version">{{ item.versions.patched }}</span>
          </div>
        </div>

        <div class="recommendation vue-ui-text success banner">
          <VueIcon icon="arrow_forward" class="big"/>
          {{ item.recommendation }}
        </div>
      </div>

      <div class="parents-list">
        <div
          v-for="(parents, index) of displayedParents"
          :key="index"
          class="parents"
        >
          <div v-if="!parents.length" class="vue-ui-empty">
          {{ $t('org.vue.widgets.vulnerability.direct-dep') }}
          </div>

          <template v-else>
            <div
              v-for="(parent, index) of parents"
              :key="index"
              class="parent"
            >
              <span class="name">{{ parent.name }}</span>
              <VueIcon
                icon="chevron_right"
                class="separator-icon medium"
              />
            </div>
            <div class="parent current">
              <span class="name">{{ item.name }}</span>
            </div>
          </template>
        </div>

        <div v-if="item.parents.length > 3" class="show-more">
          <VueButton
            :icon-left="showMoreParents ? 'expand_less' : 'expand_more'"
            class="flat"
            @click="$emit('toggle-more-parents')"
          >
            {{ $t(`org.vue.common.show-${showMoreParents ? 'less' : 'more'}`) }}
          </VueButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SEVERITIES } from './Vulnerability.vue'

export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    showMoreParents: {
      type: Boolean
    }
  },

  computed: {
    severity () {
      return SEVERITIES[this.item.severity]
    },

    displayedParents () {
      return this.showMoreParents ? this.item.parents : this.item.parents.slice(0, 3)
    }
  }
}
</script>

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

.vulnerability-item
  padding $padding-item
  border-top solid 1px rgba($color-text-light, .2)

.wrapper
  h-box()

.main-infos
  flex 1

.name
  font-weight bold

.title
  cursor help
  border-bottom 1px dotted

.version
  margin-left 4px
  font-family monospace
  font-size .9em

.severity
  color $vue-ui-color-dark
  .vue-ui-dark-mode &
    color $vue-ui-color-light
  &.danger
    color $vue-ui-color-danger
  &.warning
    color $vue-ui-color-warning

.parents-list
  margin-left 12px
  width 50%

.parents
  h-box()
  margin 12px 0
  flex-wrap wrap
  width 100%

.parent
  &:not(:first-child)
    opacity .7

.separator-icon
  >>> svg
    fill $color-text-light

.vue-ui-empty
  padding 0

.info-versions
  margin-top 4px

.info-version
  display flex
  align-items baseline
  margin-top 2px

  .vue-ui-icon
    margin-right 4px
    opacity .5

  .version
    margin-left 8px

.recommendation
  margin 8px 0
  display inline-flex
  align-items center
</style>
