<i18n>
{
  "en": {
    "NotificationForm": {
      "message": "Message",
      "send": "Send",
      "title": "Notification",
      "template": "Template",
      "cancel": "Сancel"
    }
  },
  "ru": {
    "NotificationForm": {
      "message": "Сообщение",
      "send": "Отправить",
      "title": "Уведомление",
      "template": "Шаблон",
      "cancel": "Отмена"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit">
    <div v-if="readonly" class="q-gutter-y-xs">
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('NotificationForm.message') }}
        </div>
        <div class="col text-grey-7">{{ messageCast }}</div>
      </div>
    </div>
    <div v-else class="q-gutter-y-md">
      <div class="text-h6">
        {{ $t(title) }}
      </div>
      <div v-if="!!templates.length" class="row">
        <q-select
          v-model="templateObject"
          class="col"
          :options="templates"
          filled
          map-options
          :label="$t('NotificationForm.template')"
        />
      </div>
      <q-editor
        v-model="messageCast"
        :placeholder="$t('NotificationForm.message')"
      />
      <div class="row q-gutter-y-md">
        <q-btn
          class="col-xs-12 col-sm-auto"
          color="primary"
          outline
          type="button"
          :label="$t('NotificationForm.cancel')"
          @click="cancelProcess"
        />
        <q-btn
          color="primary"
          class="col-xs-12 col-sm-auto q-ml-sm-md"
          type="submit"
          :label="$t('NotificationForm.send')"
        />
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      messageCast: '',
      templates: [],
      templateObject: null,
    };
  },
  computed: {
    outputData() {
      return {
        message: this.messageCast,
        transExit: false,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          this.messageCast = val.message || '';
          this.title = val.title || 'NotificationForm.title';
          if (
            val.templates &&
            val.templates instanceof Array &&
            val.templates.length > 0
          ) {
            this.templates = val.templates.map((el) => {
              return {
                value: el.id,
                label: el.name,
                body: el.body,
              };
            });
          }
        }
      },
      immediate: true,
    },
    templateObject: {
      handler: function (val) {
        if (val) {
          this.messageCast = val.body || '';
        }
      },
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    cancelProcess(e) {
      this.$emit('submit', e, { transExit: true });
    },
  },
};
</script>
