<template>
  <q-form @submit="submit">
    <div class="row q-gutter-y-md">
      <q-select
        v-model="selectedTemplateId"
        option-label="name"
        option-value="id"
        class="col-12"
        :options="templates"
        emit-value
        map-options
        :label="$t('notifications.template')"
        filled
      />
      <q-input
        v-model="emailTitle"
        filled
        :label="$t('notifications.messageTopic') + ' *'"
        :rules="[rules.required]"
        required
        class="col-12"
      />
      <div class="row col-12 no-wrap q-gutter-xs items-start">
        <q-editor
          v-model="editorText"
          :placeholder="$t('notifications.messageBody')"
          :rules="[rules.required]"
          class="col-9"
        />
        <div class="col-3">
          <q-select
            class="q-mb-xs"
            :options="placeholders"
            v-model="placeholder"
            option-value="code"
            option-label="name"
            emit-value
            map-options
            label="Данные"
          />
          <q-btn icon="add" color="primary" @click="addPlaceholder" />
        </div>
      </div>
      <div class="col-12">
        <q-btn color="primary" :label="$t('notifications.send')" type="submit" />
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
import { Component, Prop, Watch } from 'vue-property-decorator';
import Vue from 'vue';
import InputData from '@/types/wf/InputData';
import { Placeholder, PlaceholdersApi } from '@openapi/notifier-registry';

interface NotificationTemplate {
  id: string;
  name: string;
  body: string;
  language: string;
}

class InputDataProp implements InputData {
  processName = '';
  userTaskId = '';
  templates: NotificationTemplate[] = [];
}

@Component({})
export default class BodyAndTopicForms extends Vue {
  @Prop() readonly inputData: InputDataProp;
  @Prop() readonly readonly: boolean;

  private placeholders: Placeholder[] = [];
  private placeholder = '';
  private addPlaceholder(): void {
    this.editorText += ` {{{${this.placeholder}}}}`;
  }

  private templates: NotificationTemplate[] = [];

  private emailTitle = '';

  private editorText = '';

  private selectedTemplateId = '';

  private rules = {
    required: (val: any) => !!val || 'Обязательное поле',
  };

  private submit(e: any): void {
    const model: any = {};
    let template;
    if (this.selectedTemplateId) {
      template = this.templates.find(
        (x: any) => x.id === this.selectedTemplateId
      );
    }
    if (
      template &&
      template.body === this.editorText &&
      template.name === this.emailTitle
    ) {
      model.selectedTemplateId = this.selectedTemplateId;
      model.templateTitle = this.emailTitle;
    } else {
      model.newTemplateBody = this.editorText;
      model.newTemplateTitle = this.emailTitle;
    }

    this.$emit('submit', e, model);
  }

  @Watch('inputData', { immediate: true })
  private inputDataUpdate(val: InputDataProp) {
    const templates: NotificationTemplate[] = val.templates;

    if (templates) {
      this.templates = templates;
    }
  }

  @Watch('selectedTemplateId', { immediate: true })
  private onTemplateChange(val: string) {
    const template = this.templates.find(
      (x: NotificationTemplate) => x.id === val
    );
    if (template) {
      this.editorText = template.body;
      this.emailTitle = template.name;
    }
  }

  private placeholderApi = new PlaceholdersApi();
  private mounted(): void {
    this.placeholderApi
      .searchPlaceholders()
      .then((response) => {
        this.placeholders = [...response.data];
      })
      .catch((e) => {});
  }
}
</script>
