<template>
  <div class="vulnerability">
    <StatusWidget
      v-if="status"
      :icon="status.status === 'attention' ? severity.icon : icons[status.status]"
      :icon-class="status.status === 'attention' ? severity.class : iconClasses[status.status]"
      :title="$t(`org.vue.widgets.vulnerability.messages.${status.status}`, { n: status.count })"
      :status="status"
      :message="status.message"
      implemented
      @check="checkForUpdates()"
    >
      <template #more-actions>
        <VueButton
          v-if="status.status !== 'loading'"
          :label="$t('org.vue.widgets.vulnerability.recheck')"
          icon-left="refresh"
          @click="refresh()"
        />
      </template>
    </StatusWidget>
  </div>
</template>

<script>
import { UPDATES_ICON_CLASSES } from '../util/consts'

import StatusWidget from './StatusWidget.vue'

const UPDATES_ICONS = {
  ok: 'verified_user',
  loading: 'hourglass_empty',
  attention: 'error',
  error: 'error'
}

export const SEVERITIES = {
  critical: {
    class: 'danger',
    icon: 'new_releases'
  },
  high: {
    class: 'danger',
    icon: 'error'
  },
  moderate: {
    class: 'warning',
    icon: 'error'
  },
  low: {
    class: '',
    icon: 'error'
  }
}

export default {
  components: {
    StatusWidget
  },

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

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

  created () {
    this.icons = UPDATES_ICONS
    this.iconClasses = UPDATES_ICON_CLASSES
  },

  methods: {
    refresh () {
      this.$callPluginAction('org.vue.widgets.actions.check-vunerability')
    }
  }
}
</script>
