<i18n>
{
  "en": {
    "EmployeesPasswordUrlForm": {
      "recoverPassword": "Link for set password",
      "next": "Next step"
    }
  },
  "ru": {
    "EmployeesPasswordUrlForm": {
      "recoverPassword": "Ссылка для настройки пароля",
      "next": "Дальше"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit">
    <div class="q-gutter-y-md">
      <div class="text-h6">
        {{ $t('EmployeesPasswordUrlForm.recoverPassword') }}
      </div>
      <div class="recover-password-link">
        <span>
          {{ recoverPasswordLink }}
        </span>
        <q-icon
          size="sm"
          name="pgs-copy"
          class="copy-button cursor-pointer"
          @click="sendToClipBoard(recoverPasswordLink)"
        />
      </div>

      <q-btn
        color="primary"
        :label="$t('EmployeesPasswordUrlForm.next')"
        type="submit"
      />
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck

import { copyToClipboard } from 'quasar';

export default {
  props: ['input-data'],
  data() {
    return {
      recoverPasswordLink: '',
    };
  },
  watch: {
    inputData: {
      handler: function (val, oldVal) {
        if (
          val &&
          oldVal &&
          typeof val === 'object' &&
          typeof oldVal === 'object' &&
          JSON.stringify(val) === JSON.stringify(oldVal)
        ) {
          return;
        }
        if (val) {
          this.recoverPasswordLink = val.secretLink || '';
        }
      },
      immediate: true,
    },
  },
  methods: {
    sendToClipBoard(textValue: string): void {
      copyToClipboard(textValue);
      this.$q.notify({
        message: `'${textValue}' скопирован`,
      });
    },
    submit(e) {
      this.$emit('submit', e, {});
    },
  },
};
</script>

<style lang="scss" scoped>
.copy-button {
  padding-left: 2px;
  color: #1491cf;
}
.recover-password-link {
  max-width: 100%;
  word-break: break-all;
}
</style>