<template>
  <v-main>
    <v-combobox
      class="combo-reason"
      :readonly="!editMode"
      ref="reason"
      @blur="$refs.reason.blur();"
      @change="updateTicket"
      v-model="reason"
      :items="availableReasons"
      :label="$t('cs.reason')"
      chips
      dense>
      <template v-slot:selection="{ attrs, item, parent, selected }">
        <v-tooltip
          right
          class="sc-custom-tooltip">
          <template v-slot:activator="{ on }">
            <v-chip
              label
              class="text-caption"
              v-on="on"
              color="grey">
              {{ formatEllipsis(item, 30) }}
            </v-chip>
          </template>
          <span>{{ item }}</span>
        </v-tooltip>
      </template>
    </v-combobox>
  </v-main>
</template>

<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      default: function () {
        return false;
      }
    },
    reason: {
      type: String,
      default: function () {
        return '';
      },
    },
    availableReasons: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    updateTicket() {
      if (this.reason) {
        this.$root.$emit('update-ticket', null, this.reason, null, null, false);
      }
    },
    formatEllipsis(txt, len) {
      return txt.length >= len ? `${txt.substring(0, len)} ...` : txt;
    },
  }
};
</script>
