<i18n>
{
  "en": {
    "ResetPasswordForm": {
      "confirmNewPassword": "Confirm new password",
      "newPassword": "New password",
      "rules": {
        "passwordsDontMatch": "Passwords don\"t match",
        "requiredField": "Required field"
      },
      "submitLabel": "Reset",
      "title": "Reset password"
    }
  },
  "ru": {
    "ResetPasswordForm": {
      "confirmNewPassword": "Повтор нового пароля",
      "rules": {
        "passwordsDontMatch": "Пароли не совпадают",
        "requiredField": "Обязательное поле"
      },
      "newPassword": "Новый пароль",
      "submitLabel": "Сбросить",
      "title": "Сброс пароля"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <q-input
      :ref="model.newPassword.name"
      v-model="model.newPassword.value"
      :label="`${$t(model.newPassword.label)} *`"
      :name="model.newPassword.name"
      :rules="[
        (val) =>
          (val && val.length > 0) ||
          $t('ResetPasswordForm.rules.requiredField'),
      ]"
      filled
      lazy-rules
      type="password"
    />
    <q-input
      :ref="model.confirmNewPassword.name"
      v-model="model.confirmNewPassword.value"
      :label="`${$t(model.confirmNewPassword.label)} *`"
      :name="model.confirmNewPassword.name"
      :rules="[
        (val) =>
          (val && val.length > 0) ||
          $t('ResetPasswordForm.rules.requiredField'),
        (val) =>
          val === model.newPassword.value ||
          $t('ResetPasswordForm.rules.passwordsDontMatch'),
      ]"
      filled
      lazy-rules
      type="password"
    />
    <q-btn
      :label="$t('ResetPasswordForm.submitLabel')"
      color="primary"
      type="submit"
    />
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      model: {
        confirmNewPassword: {
          label: 'ResetPasswordForm.confirmNewPassword',
          name: 'confirm-new-password',
          value: '',
        },
        newPassword: {
          label: 'ResetPasswordForm.newPassword',
          name: 'new-password',
          value: '',
        },
      },
    };
  },
  computed: {
    outputData() {
      return {
        password: this.model.newPassword.value,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          if (val.newPassword) {
            this.model.confirmNewPassword.value = val.newPassword;
            this.model.newPassword.value = val.newPassword;
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
  },
};
</script>
