<i18n>
{
  "en": {
    "statements": {
      "DialogComment": {
        "description": "Sending the regulations to the applicant on suspension of the conclusion and submission of extended documents and (or) presentation",
        "commentLabel": "Comment",
        "actionLabel": "Request"
      }
    }
  },
  "ru": {
    "statements": {
      "DialogComment": {
        "description": "Направление уведомления заявителю о приостановлении заявления и представлении дополнительных документов и (или) сведений",
        "commentLabel": "Комментарий",
        "actionLabel": "Отправить"
      }
    }
  }
}
</i18n>

<template>
  <div>
    <q-btn
      :disable="disableAllButtons || buttonDisable"
      class="q-ml-sm"
      outline
      :label="getObjectValue(buttonSettings, 'props.label')"
      :color="getObjectValue(buttonSettings, 'props.color')"
      :class="{
        hidden: !getObjectValue(buttonSettings, 'props.visible', true),
      }"
      @click="doAction"
    />
    <q-dialog v-model="dialogVisible">
      <q-card
        class="no-shadow"
        :style="{
          maxWidth: '80vw',
          width: '700px',
        }"
      >
        <q-form @submit="submit">
          <q-card-section class="text-h6">
            <q-banner rounded class="q-mt-md grey-banner q-py-xs">
              <div class="text-grey-9">{{ descriptionText }}</div>
            </q-banner>
          </q-card-section>

          <q-card-section>
            <q-input
              v-model="comment"
              :label="$t('statements.DialogComment.commentLabel')"
              filled
              required
              type="textarea"
              :disable="loading"
            />
          </q-card-section>

          <q-inner-loading :showing="loading">
            <q-spinner-gears color="primary" size="50px" />
          </q-inner-loading>

          <q-card-actions class="q-pa-md" align="left">
            <q-btn
              type="submit"
              :label="$t('statements.DialogComment.actionLabel')"
              color="primary"
              unelevated
              :disable="loading"
            />
          </q-card-actions>
        </q-form>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import get from 'lodash/get';

@Component({})
export default class DialogComment extends Vue {
  @Prop() readonly model: any;
  @Prop() readonly disableAllButtons: any;
  @Prop({ required: true }) readonly userTask!: any;
  @Prop() readonly buttonSettings: any;
  @Prop() readonly common: any;

  dialogVisible = false;
  loading = false;

  comment = '';

  get buttonId(): string | null {
    return get(this.buttonSettings, 'id', null);
  }

  get buttonCode() {
    if (!this.buttonId) return this.buttonId;
    return this.buttonId[0].toUpperCase() + this.buttonId.slice(1);
  }

  get buttonDisable() {
    return get(this.buttonSettings, 'props.disable', false);
  }

  get statementId() {
    return get(this.common, 'id', null);
  }

  get serviceMeta() {
    return this.$store.getters['registryService/services/servicesCard'];
  }

  get descriptionDefault(): string {
    return this.$t('statements.DialogComment.description') as string;
  }

  get descriptionText(): string {
    const description =
      this.userTask.userTask?.outData[`description${this.buttonCode}`] || '';

    return description ? description : this.descriptionDefault;
  }

  get commentDefault(): string {
    return this.userTask.userTask?.outData?.commentTemplate || '';
  }

  mounted(): void {
    const comment =
      this.userTask.userTask?.outData[`commentTemplate${this.buttonCode}`] ||
      '';

    this.comment = comment || this.commentDefault;
  }

  getObjectValue(object: any, path: any, defaultValue: any = null) {
    return get(object, path, defaultValue);
  }

  doAction() {
    this.dialogVisible = true;
  }

  submit() {
    this.$emit('update', {
      comment: this.comment,
    });

    this.$emit('submit', {
      buttonId: this.buttonId,
      data: {
        comment: this.comment,
      },
      force: true,
    });

    this.dialogVisible = false
  }
}
</script>
