<template>
  <q-form ref="confirm_form" :lazy-validation="false" @submit="confirm">
    <q-input
      id="regconfirm"
      v-model="regConfirm"
      :dark="dark"
      :rules="regConfirmRules"
      clearable
      label="Код подтверждения регистрации"
      maxlength="12"
      required
    />

    <div class="row justify-end">
      <q-btn flat no-caps @click.prevent="resendConfirm">
        <template v-slot:default>
          <div class="flex no-wrap">
            <span> Я не получил код подтверждения. </span>
            <q-icon
              v-if="!progress1"
              style="margin-left: 0.25rem"
              color="purple-10"
              name="send"
            ></q-icon>
            <q-circular-progress
              v-else
              style="margin-left: 0.25rem"
              indeterminate
              size="28"
            />
          </div>
        </template>
      </q-btn>
    </div>

    <div class="row justify-end">
      <q-btn :disable="!regConfirm" flat outlined type="submit">
        <template v-slot:default>
          <div class="flex no-wrap">
            <span>Подтвердить</span>
            <q-icon
              v-if="!progress2"
              style="margin-left: 0.25rem"
              color="purple-10"
              name="send"
            ></q-icon>
            <q-circular-progress
              v-else
              style="margin-left: 0.25rem"
              indeterminate
              size="28"
            />
          </div>
        </template>
      </q-btn>
    </div>
  </q-form>
</template>
<script>
import { mapActions, mapState } from 'pinia';
import { useRegistradoStore } from 'src/stores/registrado';
// import { useUiStore } from "src/stores/UI";
// import { useAuthStore } from 'src/stores/auth';
import { useCurrentUserStore } from 'src/stores/current-user';
export default {
  name: 'ConfirmForm',

  data() {
    return {
      progress1: false,
      progress2: false,

      error: '',
      regConfirm: '',
      regConfirmRules: [
        (v) => !!v || 'Поле обязательно для заполнения',
        (v) => /^[0-9a-zA-z]+$/.test(v) || 'Неверный код подтверждения',
        (v) => !this.error || this.error,
      ],
    };
  },

  computed: {
    // ...mapState(useUiStore, ["dark"]),
    ...mapState(useCurrentUserStore, ['authData']),
  },
  watch: {},
  methods: {
    ...mapActions(useRegistradoStore, {
      resendConfirmMethod: 'resendConfirm',
      confirmMethod: 'confirm',
    }),

    resendConfirm() {
      const vars = {
        login: this.authData.login,
        password: this.authData.password,
      };
      this.progress1 = true;
      this.resendConfirmMethod(vars)
        .then((resp) => {
          if (resp.status) {
            this.$q.notify({
              type: 'positive',
              message: resp.message,
            });
          } else {
            this.$q.notify({
              type: 'negative',
              message: resp.message,
            });
          }
          this.progress1 = false;
        })
        .catch((err) => {
          console.error(err);
          this.progress1 = false;
        });
    },

    confirm() {
      if (this.$refs.confirm_form?.validate()) {
        const vars = {
          login: this.authData.login,
          password: this.authData.password,
          confirm: this.regConfirm,
        };
        this.progress2 = true;

        this.confirmMethod(vars)
          .then((resp) => {
            if (resp.status) {
              this.$emit('success', true);
              this.$q.notify({
                type: 'positive',
                message: resp.message,
              });
            } else {
              this.error = resp.message;
              this.$refs.confirm_form.validate();
              this.error = '';
              this.$q.notify({
                type: 'negative',
                message: resp.message,
              });
            }
            this.progress2 = false;
          })
          .catch((err) => {
            console.error(err);
            this.progress2 = false;
          });
      }
    },
  },
};
</script>
<style scoped></style>
