<template>
  <v-main>
    <v-select
      :readonly="!editMode"
      ref="severity"
      @change="updateTicket"
      @blur="$refs.severity.blur()"
      v-model="severity"
      :items="formatSeverities(availableSeverities)"
      :label="$t('cs.ticketseverity')"
      item-text="severity"
      item-value="severityValue"
      standard>
      <template v-slot:selection="{item, index}">
        <span>{{ $t(item.severity) }}</span>
      </template>
      <template v-slot:item="{item, index}">
        <span>{{ item.severityValue }}</span>
      </template>
    </v-select>
  </v-main>
</template>

<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      default: function () {
        return false;
      }
    },
    severity: {
      type: String,
      default: function () {
        return null;
      },
    },
    availableSeverities: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    updateTicket() {
      this.$root.$emit('update-ticket', null, null, this.severity, null, false);
    },
    formatSeverities(severities) {
      if (severities) {
        const arr = new Array();
        severities.filter(severity => {
          arr.push({'severity': `cs.${severity}`, 'severityValue': severity});
        });
        return arr;
      }
    },
  }
};
</script>
