<template>
  <div class="page-style">
    <q-stepper ref="stepper" v-model="step" :dark="dark" active-color="primary" animated inactive-color="teal-5" vertical
      class="main-block-with-cropped stepper-style">
      <q-step :done="step > 1" :name="1" :title="$q.screen.width > 1000 ? 'Восстановление доступа' : ''"
        icon="psychology">
        <p>Вы зашли на страницу восстановления доступа.</p>
        <p>
          Для продолжения процедуры Вам необходимо идентифицировать свою учетную
          запись по E-mail, указанным при регистрации.
        </p>
        <q-form :dark="dark" :lazy-validation="false" required @submit.prevent="step_one">
          <q-input ref="login" v-model="login" :dark="dark" :rules="nameRules">
            <template v-slot:prepend>
              <q-icon color="primary" name="mail"></q-icon>
              <!-- <q-icon color="purple-10" name="phone"></q-icon> -->
            </template>
            <template v-slot:append>
              <q-btn flat @click="step_one">
                <template v-slot:default>
                  <q-icon color="primary" name="send"></q-icon>
                </template>
              </q-btn>
            </template>
          </q-input>
        </q-form>
      </q-step>
      <q-step :done="step > 2" :name="2" :title="$q.screen.width > 1000 ? 'Код подтверждения' : ''" icon="psychology">
        <div>
          <p>
            На ваш e-mail выслан код подтверждения. Для продолжения процедуры
            восстановления доступа введите этот код ниже:
          </p>
          <q-form :dark="dark" @submit.prevent="step_two">
            <q-input ref="code" v-model="code" :dark="dark" :rules="nameRules">
              <template v-slot:prepend>
                <q-icon color="primary" name="security"></q-icon>
              </template>
              <template v-slot:append>
                <q-btn flat @click="step_two">
                  <template v-slot:default>
                    <q-icon color="primary" name="send"></q-icon>
                  </template>
                </q-btn>
              </template>
            </q-input>
          </q-form>
        </div>
      </q-step>
      <q-step :done="step > 3" :name="3" :title="$q.screen.width > 1000 ? 'Новый пароль' : ''" icon="psychology">
        <p>
          Установите новый пароль и используйте его для доступа к свой учетной
          записи.
        </p>
        <q-form :dark="dark" @submit.prevent="step_three">
          <q-input ref="password1" v-model="password1" :dark="dark" :rules="passwordRules" maxlength="32"
            placeholder="Новый пароль" type="password">
            <template v-slot:prepend>
              <q-icon color="primary" name="security"></q-icon>
            </template>
          </q-input>
          <q-input ref="password2" v-model="password2" :dark="dark" :rules="confirmRules" maxlength="32"
            placeholder="Повторите пароль" type="password">
            <template v-slot:prepend>
              <q-icon color="primary" name="security"></q-icon>
            </template>
            <template v-slot:append>
              <q-btn :disabled="!enabled" flat @click="step_three">
                <template v-slot:default>
                  <q-icon color="primary" name="send"></q-icon>
                </template>
              </q-btn>
            </template>
          </q-input>
        </q-form>
      </q-step>
      <q-step :name="4" :title="$q.screen.width > 1000 ? 'Завершение' : ''" align="center"
        class="row align-center justify-center" icon="done_outline">
        <p>
          Новый пароль установлен, теперь Вы можете воспользоваться формой входа
          и продолжить использование своего аккаунта
        </p>
        <div v-if="step === 4" class="row justify-end">
          <q-btn flat outlined to="/">
            <template v-slot:default>
              <div class="flex no-wrap">
                <span>Форма входа</span>
                <q-icon style="margin-left: 0.25rem" outline flat color="primary" name="send"></q-icon>
              </div>
            </template>
          </q-btn>
        </div>
      </q-step>
      <!-- <template v-slot:navigation>
        <q-stepper-navigation>
          <q-btn :label="step === 4 ? 'Завершить' : 'Продолжить'" color="primary" @click="$refs.stepper.next()" />
          <q-btn v-if="step > 1" class="q-ml-sm" color="primary" flat label="Назад" @click="$refs.stepper.previous()" />
        </q-stepper-navigation>
      </template> -->
    </q-stepper>
  </div>
</template>
<script>
import gql from 'graphql-tag';

import { mapState, mapActions, mapWritableState } from 'pinia';
import { useRegistradoStore } from 'src/stores/registrado';
import { useCurrentUserStore } from '../stores/current-user';
import { useUiStore } from 'src/stores/UI';
import { defineComponent } from 'vue';

const mail_phone_regexp = /^[a-zA-Z0-9+@._\-()]+$/;

export default defineComponent({
  name: 'RestarigoUzanto',


  data() {
    return {
      errors: {},
      step: 1,
      loading: false,
      login: '',
      code: '',
      password1: '',
      password2: '',
      error: '',
      nameRules: [
        (v) => {
          return !!v || 'Поле обязательно для заполнения';
        },
        (v) =>
          mail_phone_regexp.test(v) ||
          'Поле имеет недопустимые символы: скобки, подчеркивания, знаки препинания (кроме точки) и пр.',
      ],
      passwordRules: [
        (v) => !!v || 'Поле обязательно для заполнения',
        (v) =>
          /^[0-9a-zA-Z+-_*.,;$!?%#=()]+$/.test(v) ||
          'Допустимы только символы латинского алфавита, цифры и символы "_*.,;$!?%#=()"',
        (v) =>
          (v.length >= 6 && v.length <= 32) ||
          'Пароль должен иметь длину от 6 до 32 символов',
        (v) =>
          !Object.prototype.hasOwnProperty.call(this.errors, 'pasvorto') ||
          this.errors.pasvorto,
      ],
      confirmRules: [
        (v) => !!v || 'Поле обязательно для заполнения',
        (v) =>
          /^[0-9a-zA-Z+-_*.,;$!?%#=()]+$/.test(v) ||
          'Допустимы только символы латинского алфавита, цифры и символы "_*.,;$!?%#=()"',
        (v) => this.password1 === v || 'Пароли не совпадают',
      ],
      query: gql`
        mutation ($login: String!, $kodo: String, $password: String) {
          restarigo(
            ensalutu: $login
            konfirmaKodo: $kodo
            pasvorto: $password
          ) {
            status
            message
          }
        }
      `,
    };
  },


  computed: {
    enabled() {
      return this.password1 && this.password2;
    },

    ...mapState(useCurrentUserStore, ['user', 'isLoggedIn']),
    ...mapState(useUiStore, ['dark']),
    ...mapWritableState(useUiStore, ['showLoginForm']),

  },

  watch: {
    isLoggedIn: function (cur, old) {
      // перенаправляем на главную, если пользователь авторизовался на этой странице
      if (cur) {
        this.$router.push('/');
      }
    },
    step: function (cur) {
      if (cur === 4) this.showLoginForm = true;
    },
  },

  methods: {
    ...mapActions(useRegistradoStore, ['restarigi']),
    step_one() {
      if (this.$refs.login?.validate()) {
        const vars = {
          login: this.login,
        };
        this.restarigi(vars)
          .then((resp) => {
            if (resp.status) {
              this.$refs.stepper.next();
              this.$q.notify({
                type: 'positive',
                message: resp.message,
              });
            } else {
              this.$q.notify({
                type: 'negative',
                message: resp.message,
              });
              this.error = resp.message;
              this.$refs.login?.validate();
              this.error = '';
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }
      return false;
    },
    step_two() {
      if (this.$refs.code?.validate()) {
        const vars = {
          login: this.login,
          kodo: this.code,
        };
        this.restarigi(vars)

          .then((resp) => {
            if (resp.status) {
              this.$refs.stepper.next();
              this.$q.notify({
                type: 'positive',
                message: resp.message,
              });
            } else {
              this.$q.notify({
                type: 'negative',
                message: resp.message,
              });
              this.error = resp.message;
              this.$refs.code?.validate();
              this.error = '';
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }
      return false;
    },
    step_three() {
      if (this.$refs.password2?.validate()) {
        const vars = {
          login: this.login,
          kodo: this.code,
          password: this.password2,
        };
        this.restarigi(vars)

          .then((resp) => {
            if (resp.status) {
              this.$refs.stepper.next();
              this.$q.notify({
                type: 'positive',
                message: resp.message,
              });
            } else {
              this.$q.notify({
                type: 'negative',
                message: resp.message,
              });
              this.error = resp.message;
              this.$refs.password2?.validate();
              this.error = '';
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }
      return false;
    },
  },

  mounted() {
    // eslint-disable-next-line no-unused-expressions
    this.isLoggedIn ? this.$router.push('/') : this.$refs.stepper.goTo(1);
  },
});
</script>
<style scoped>
.stepper-style {
  min-width: 100%;
  color: "primary";
}
</style>
<style scoped></style>
