<i18n>
{
  "en": {
    "ErrorForm": {
      "body": "Response body",
      "code": "Response HTTP-code",
      "copy": "Copy",
      "copied": "Copied",
      "date": "Date",
      "finish": "Finish",
      "message": "Message",
      "request": "Request",
      "title": "Error",
      "type": "Error type",
      "url": "Current URL",
      "username": "Username (login)"
    }
  },
  "ru": {
    "ErrorForm": {
      "body": "Тело ответа",
      "code": "HTTP-код ответа",
      "copy": "Скопировать",
      "copied": "Скопировано",
      "date": "Дата",
      "finish": "Завершить",
      "message": "Сообщение",
      "request": "Запрос",
      "title": "Ошибка",
      "type": "Тип ошибки",
      "url": "Текущий URL",
      "username": "Имя пользователя (логин)"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div class="text-h6">
      {{ $t(title) }}
    </div>
    <p v-if="description">
      {{ $t(description) }}
    </p>
    <q-list bordered>
      <q-item v-if="date">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.date') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ date }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="username">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.username') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ username }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="url">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.url') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ url }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="request">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.request') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ request }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="code">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.code') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ code }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="message">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.message') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ message }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="type">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.type') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ type }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="body">
        <q-item-section>
          <q-item-label caption>
            {{ $t('ErrorForm.body') }}
          </q-item-label>
          <q-item-label class="text-bold">
            {{ body }}
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
    <q-btn
      class="q-mr-md"
      color="primary"
      icon="file_copy"
      outline
      type="button"
      :label="$t('ErrorForm.copy')"
      @click="copyHandler"
    />
    <q-btn
      color="primary"
      icon="check"
      type="submit"
      :label="$t('ErrorForm.finish')"
    />
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import { notifySuccess } from '@utils/notify';

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      body: '',
      date: '',
      description: '',
      code: '',
      message: '',
      request: '',
      title: '',
      type: '',
      username: '',
    };
  },
  computed: {
    outputData() {
      return {
        body: this.body,
        date: this.date,
        code: this.code,
        description: this.description,
        message: this.message,
        request: this.request,
        title: this.title,
        type: this.type,
        url: this.url,
        username: this.username,
      };
    },
    dataForCopy() {
      return `${this.$t('ErrorForm.date')}: "${this.date}"
${this.$t('ErrorForm.username')}: "${this.username}"
${this.$t('ErrorForm.url')}: "${this.url}"
${this.$t('ErrorForm.request')}: "${this.request}"
${this.$t('ErrorForm.code')}: "${this.code}"
${this.$t('ErrorForm.message')}: "${this.message}"
${this.$t('ErrorForm.type')}: "${this.type}"
${this.$t('ErrorForm.body')}: "${this.body}"`;
    },
    url() {
      return window.document.location.href.toString() || '';
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          this.body = val.body || '';
          this.date = val.date || '';
          this.description = val.description || '';
          this.code = val.code || '';
          this.message = val.message || '';
          this.request = val.request || '';
          this.title = val.title || 'ErrorForm.title';
          this.type = val.type || '';
          this.username = val.username || '';
        }
      },
      immediate: true,
    },
  },
  methods: {
    copyHandler() {
      return new Promise((resolve, reject) => {
        if (!navigator.clipboard) {
          const textArea = document.createElement('textarea');

          textArea.style.position = 'fixed';
          textArea.value = this.dataForCopy;

          document.body.appendChild(textArea);

          textArea.focus();
          textArea.select();

          try {
            const result = document.execCommand('copy');

            return resolve(result);
          } catch (e) {
            return reject(e);
          } finally {
            document.body.removeChild(textArea);
          }
        }

        navigator.clipboard.writeText(this.dataForCopy).then(
          () => {
            notifySuccess(`${this.$t('ErrorForm.copied')}!`, 'info', 'info');

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