<template>
  <div class="message-line-handler">
    <div class="message-text">{{ text }}<q-popup-edit
        buttons
        v-model="overriddenMessages[row.index]"
        :validate="value => value == null || value.length <= maxMessageSize"
        v-if="!disabled"
    >
      <template v-slot="{ initialValue, value, emitValue, validate, set, cancel }">
        <q-input
            type="textarea"
            autofocus
            :value="overriddenMessages[row.index]"
            :hint="`${overriddenMessages[row.index] != null ? overriddenMessages[row.index].length : 0} / ${maxMessageSize}`"
            :rules="[value => validate(value) || `Ați introdus peste ${maxMessageSize} caractere`]"
            debounce="250"
            @input="emitValue"
            :clearable="true"
            :disabled="disabled"
            clear-icon="close"
        />
      </template>
    </q-popup-edit><q-tooltip v-if="!disabled">Apăsați pentru a înlocui textul<br/>{{ text }}</q-tooltip></div>
    <div class="sender-info-bar">
      <span v-for="(number, i) in destinationNumbers" :class="!number.isValid || number.destinationType !== 'nationalMobile' ? 'warning' : ''">
        <span v-if="i !== 0">, </span>
        {{ number.e164 }}
        <span class="warning" v-if="!number.isValid">invalid <q-icon name="warning"/></span>
        <span class="warning" v-if="number.destinationType === 'international'">internațional <q-icon name="warning"/></span>
        <span class="warning" v-if="number.destinationType === 'nationalLandline'">fix <q-icon name="warning"/></span>
      </span>
      <span v-if="destinationNumbers.length === 0" class="warning">
        Nici-un număr de telefon nu a fost găsit <q-icon name="warning"/>
      </span>
    </div>
    <q-icon name="edit" v-if="overriddenMessages[row.index] != null && overriddenMessages[row.index].length > 0" class="fixed-top-right"/>
  </div>
</template>


<script>
module.exports = {
  name: "MessageLineHandler",
  data() {
    return {};
  },
  props: {
    templateText: String,
    row: Object,
    columnNameMap: Map,
    phoneColumns: Array,
    overriddenMessages: Array,
    disabled: {type: Boolean, default: false},
    maxMessageSize: Number
  },
  computed: {
    text() {
      return this.overriddenMessages[this.row.index] || applyTemplate(this.templateText, this.columnNameMap, this.row);
    },
    destinationNumbers() {
      return getCandidatePhoneNumbers(this.row.data, this.phoneColumns).map(n => prepareNumber(n));
    }
  }
}
</script>

<style scoped>
  div.message-line-handler div.message-text {
    position: relative;
    width: 450px;
    max-width: 450px;
    text-overflow: ellipsis;
    white-space: pre-line;
    overflow: hidden;
    font-size: 0.8em;
    height: 49px;
  }

  div.sender-info-bar {
    font-size: 0.7em;
  }

  .q-icon.fixed-top-right {
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .warning {
    color: red;
  }
</style>

<style>
  .q-popup-edit .row { /* bootstrap - quasar conflict */
    margin: 0;
  }
</style>