<i18n>
{
  "en": {
    "ConfirmationForm": {
      "cancel": "Cancel",
      "confirm": "Confirm",
      "title": "Confirmation",
      "confirmed": "Confirmed",
      "notConfirmed": "Not confirmed"
    }
  },
  "ru": {
    "ConfirmationForm": {
      "cancel": "Отмена",
      "confirm": "Подтвердить",
      "title": "Подтверждение",
      "confirmed": "Подтверждено",
      "notConfirmed": "Не подтверждено"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit">
    <div v-if="!readonly" class="q-gutter-y-md">
      <div class="text-h6">
        {{ $t(title) }}
      </div>
      <p>
        {{ description }}
      </p>
      <ul v-if="dependences.length">
        <li v-for="(dependence, i) in dependences" :key="`dependence-${i}`">
          {{ dependence }}
        </li>
      </ul>
      <div class="row q-gutter-y-md">
        <q-btn
          class="col-xs-12 col-sm-auto"
          color="primary"
          outline
          type="button"
          :label="$t(cancelLabel)"
          @click="cancelHandler"
        />
        <q-btn
          color="primary"
          class="col-xs-12 col-sm-auto q-ml-sm-md"
          type="button"
          :label="$t(confirmLabel)"
          @click="confirmHandler"
        />
      </div>
    </div>
    <div v-else class="text-grey-7">
      <div v-if="inputData.result === true" class="text-bold">
        {{ $t('ConfirmationForm.confirmed') }}:
      </div>
      <div v-else class="text-bold">
        {{ $t('ConfirmationForm.notConfirmed') }}:
      </div>
      <p>
        {{ description }}
      </p>
      <ul v-if="dependences.length">
        <li v-for="(dependence, i) in dependences" :key="`dependence-${i}`">
          {{ dependence }}
        </li>
      </ul>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      cancelLabel: '',
      confirmLabel: '',
      dependences: [],
      description: '',
      result: false,
    };
  },
  computed: {
    outputData() {
      return {
        result: this.result,
        dependences: this.dependences,
        description: this.description,
        title: this.title,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          this.cancelLabel = val.cancelLabel || 'ConfirmationForm.cancel';
          this.confirmLabel = val.confirmLabel || 'ConfirmationForm.confirm';
          this.dependences = val.dependences || [];
          this.description = this.$t(val.description, val);
          this.title = this.$t(val.title);
        }
      },
      immediate: true,
    },
  },
  methods: {
    cancelHandler(e) {
      this.result = false;

      this.submit(e);
    },
    confirmHandler(e) {
      this.result = true;

      this.submit(e);
    },
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
  },
};
</script>
