<template>
  <q-page>
    <q-stepper
      ref="stepper"
      v-model="step"
      :dark="dark"
      active-color="purple-10"
      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="purple-10" 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="purple-10" 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="purple-10" name="security"></q-icon>
              </template>
              <template v-slot:append>
                <q-btn flat @click="step_two">
                  <template v-slot:default>
                    <q-icon color="purple-10" 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="purple-10" 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="purple-10" name="security"></q-icon>
            </template>
            <template v-slot:append>
              <q-btn :disabled="!enabled" flat @click="step_three">
                <template v-slot:default>
                  <q-icon color="purple-10" 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"
                  color="purple-10"
                  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>
  </q-page>
</template>
<script>
import gql from "graphql-tag";
import { createMetaMixin } from "quasar";
import meta from "src/utils/meta";
import { mapState, mapActions, mapWritableState } from "pinia";
import { useRegistradoStore } from "src/stores/registrado";
import { useAuthStore } from "src/stores/auth";
import { useUiStore } from "src/stores/UI";
import { defineComponent } from "vue-demi";

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

export default defineComponent({
  name: "RestarigoUzanto",
  head: {
    title: "Восстановление доступа",
  },

  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
          }
        }
      `,
      title: "Восстановление пароля",
      metaTags: {
        title: "Восстановление пароля",
        description: "Восстановление пароля",
        keywords: "Восстановление пароля",
        url: process.env.APP_HOST + this.$route.path,
        image: "",
        robots: "",
      },
    };
  },
  mixins: [
    createMetaMixin(function () {
      return meta(this.metaTags);
    }),
  ],

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

    ...mapState(useAuthStore, ["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%;
}
</style>
