<template>
  <q-form ref="reg_form" outlined @submit="registration">
    <q-input
      id="first_name"
      v-model="first_name"
      :dark="dark"
      :rules="nameRules"
      clearable
      label="Имя"
      maxlength="32"
      outlined
      required
    />
    <q-input
      id="last_name"
      v-model="last_name"
      :dark="dark"
      :rules="lastNameRules"
      clearable
      label="Фамилия"
      maxlength="48"
      outlined
    />
    <q-input
      id="username"
      v-model="email"
      :dark="dark"
      :rules="emailRules"
      clearable
      label="E-mail"
      maxlength="128"
      outlined
      required
    />
    <!-- <q-field :dark="dark" :error="isError" outlined :rules="phoneRules">
      <vue-tel-input
        v-model="number"
        :autoFormat="true"
        :dropdownOptions="{
          showDialCodeInList: false,
          showDialCodeInSelection: false,
          showFlags: false,
        }"
        :inputOptions="{
          placeholder: 'Введите номер телефона',
          styleClasses: [
            'input-vue-tel-input-in-qfield',
            'full-width',
            styleObject,
          ],
        }"
        :styleClasses="[
          'no-border',
          'no-box-shadow',
          'no-outline',
          'wrapper-vue-tel-input-in-qfield',
          'col-12',
        ]"
        mode="international"
        @input="handleInput"
      >
      </vue-tel-input>
    </q-field> -->
    <q-select
      v-model="sex"
      :dark="dark"
      :options="sexes"
      clearable
      label="Пол"
      outlined
      style="padding-bottom: 20px"
    />
    <q-select
      v-if="infoj"
      v-model="language"
      :dark="dark"
      :options="infoj.lingvoj"
      :rules="langRules"
      label="Основной язык"
      outlined
      style="padding-bottom: 20px"
    >
      <template v-slot:option="scope">
        <q-item :dark="dark" v-bind="scope.itemProps">
          <span>{{ scope.opt.label }}</span>
          <q-avatar class="on-right" size="medium" square>
            <q-img :src="scope.opt.flag" />
          </q-avatar>
        </q-item>
      </template>
    </q-select>
    <q-input
      v-model="password"
      :dark="dark"
      :rules="passwordRules"
      clearable
      label="Пароль"
      maxlength="32"
      outlined
      required
      type="password"
    />
    <q-input
      id="confirm"
      v-model="confirm_password"
      :dark="dark"
      :rules="confirmRules"
      clearable
      label="Подтверждение пароля"
      maxlength="32"
      outlined
      required
      type="password"
    />

    <div
      id="captcha-container"
      class="smart-captcha"
      style="height: 122px"
    ></div>

    <div class="row justify-end">
      <q-btn :disable="false" flat outlined type="submit">
        <template v-slot:default>
          <div class="flex no-wrap">
            <span>Зарегистрироваться</span>
            <q-icon
              v-if="!progress"
              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 { ref } from 'vue';
// import vueRecaptcha from "vue3-recaptcha2";
// import { VueTelInput } from "vue-tel-input";
import { mapActions, mapState, mapWritableState } from 'pinia';
// import { useUiStore } from "src/stores/UI";
import { useRegistradoStore } from 'src/stores/registrado';
import { useCurrentUserStore } from 'src/stores/current-user';
// import 'vue-tel-input/dist/vue-tel-input.css';

const nameRegexp = /[№~!?;,:'"@#$%^&*()_+{}<>\\[\]\\/]/;
export default {
  components: {
    // vueRecaptcha,
    // VueTelInput,
  },
  name: 'RegForm',

  data() {
    return {
      progress: false,
      number: ref(null),
      isError: false,
      menu: false,
      nick_only: false,
      errors: {},
      optionsTelKodo: null,
      yandex_captcha_key: ref(null),
      yandex_widgetId: ref(null),
      recaptcha_key: ref(null),
      first_name: '',
      last_name: '',
      nameRules: [
        (v) => !!v || 'Поле обязательно для заполнения',
        (v) =>
          !nameRegexp.test(v) ||
          'Поле имеет недопустимые символы: скобки, подчеркивания, знаки препинания (кроме точки) и пр.',
      ],
      lastNameRules: [
        (v) =>
          !nameRegexp.test(v) ||
          'Поле имеет недопустимые символы: скобки, подчеркивания, знаки препинания (кроме точки) и пр.',
      ],
      nickname: '',
      nicknameRules: [
        (v) => !!v || 'Поле обязательно для заполнения',
        (v) =>
          !v.length ||
          v[0] !== '-' ||
          'Ник не может начинаться с символа минуса',
        (v) =>
          /^[a-zA-Z0-9ĈĉĤĥĴĵŜŝŬŭ-]+$/.test(v) ||
          'Ник может содержать только латинские символы, цифры, символ минуса, а так же расширенные символы эсперанто (ĈĉĤĥĴĵŜŝŬŭ)',
        (v) =>
          (v.length >= 5 && v.length < 31) ||
          'Ник должен быть иметь длину от 5 до 30 символов',
        (v) =>
          !Object.prototype.hasOwnProperty.call(this.errors, 'unuaNomo') ||
          this.errors.unuaNomo,
      ],
      email: '',
      emailRules: [
        (v) => !!v || 'Поле обязательно для заполнения',
        (v) => /^[^@]+@[^@]+\.[^@]+$/.test(v) || 'Указан некорректный e-mail',
        (v) =>
          !Object.prototype.hasOwnProperty.call(
            this.errors,
            'chefaRetposhto',
          ) || this.errors.chefaRetposhto,
      ],
      tel_code: null,
      tel_number: null,
      telCodeRules: [(v) => !!v || !this.tel_number || 'Укажите код'],
      telNumberRules: [
        (v) => !!v || !this.tel_code || 'Укажите номер телефона',
        (v) => /[0-9]+/.test(v) || !v || 'Недопустимые символы',
        (v) =>
          !Object.prototype.hasOwnProperty.call(
            this.errors,
            'chefaTelefonanumero',
          ) || this.errors.chefaTelefonanumero,
      ],
      phoneRules: [
        (v) =>
          !Object.prototype.hasOwnProperty.call(this.errors, 'tel') ||
          this.errors.tel,
      ],
      sexes: [
        { label: 'Не указан', value: null },
        { label: 'Мужской', value: 'vira' },
        { label: 'Женский', value: 'virina' },
      ],
      sex: null,
      birthday_date: null,
      language: null,
      langRules: [
        // v => !!v || 'Поле обязательно для заполнения',
        // v => !this.errors.hasOwnProperty('lingvo') || this.errors.lingvo,
      ],
      password: '',
      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,
      ],
      confirm_password: '',
      confirmRules: [
        (v) => !!v || 'Поле обязательно для заполнения',
        (v) =>
          /^[0-9a-zA-Z+-_*.,;$!?%#=()]+$/.test(v) ||
          'Допустимы только символы латинского алфавита, цифры и символы "_*.,;$!?%#=()"',
        (v) => this.password === v || 'Пароли не совпадают',
      ],
    };
  },

  computed: {
    // ...mapState(useUiStore, ["dark"]),
    ...mapState(useRegistradoStore, ['infoj']),
    ...mapWritableState(useCurrentUserStore, ['authData']),
    styleObject: function () {
      if (this.dark) {
        return 'dark-theme';
      } else {
        return 'light-theme';
      }
    },
    captchaTheme: function () {
      return this.dark ? 'dark' : 'light';
    },
  },
  created() {
    if (!process.env.SERVER) this.fetchInfoj();
  },
  mounted() {
    let yandexCaptchaScript = document.createElement('script');
    yandexCaptchaScript.render = 'onload';
    const self = this;
    yandexCaptchaScript.onload = () => {
      if (window.smartCaptcha) {
        const container = document.getElementById('captcha-container');

        self.yandex_widgetId = window.smartCaptcha.render(container, {
          sitekey: process.env.YANDEX_CAPTCHA_SITE_KEY,
          hl: 'ru',
        });
      }
    };
    yandexCaptchaScript.async = true;
    yandexCaptchaScript.setAttribute(
      'src',
      'https://captcha-api.yandex.ru/captcha.js',
    );
    document.head.appendChild(yandexCaptchaScript);
  },

  methods: {
    ...mapActions(useRegistradoStore, ['fetchInfoj', 'addUzanto']),

    filterFn(val, update, abort) {
      update(() => {
        const needle = val.toLowerCase();
        this.optionsTelKodo = this.infoj.tel_kodoj.filter(
          (v) => v.value.toLowerCase().indexOf(needle) > -1,
        );
      });
    },
    handleInput(val, objVal) {
      if (objVal && Object.prototype.hasOwnProperty.call(objVal, 'number')) {
        this.tel_number = objVal.number;
      }
      if (objVal && Object.prototype.hasOwnProperty.call(objVal, 'valid')) {
        this.isError = !objVal.valid && val.length > 0;
      }
    },
    mapErrorObject(errors) {
      const out = {};
      for (const item of errors) {
        out[item.field] = item.message;
      }
      return out;
    },
    registration() {
      const token = window.smartCaptcha.getResponse(this.yandex_widgetId);
      if (!this.nick_only && this.$refs.reg_form.validate()) {
        const vars = {
          email: this.email,
          paswd: this.password,
          first_name: this.first_name,
          last_name: this.last_name,
          lang: this.language?.value || 'ru_RU',
          // tel: `${this.tel_number || ''}`,
          sex: this.sex?.value || null,
          captcha: token,
        };
        this.progress = true;
        this.addUzanto(vars)
          .then((resp) => {
            if (resp.status) {
              this.$emit('success', true);
              this.authData = {
                login: this.email,
                password: this.password,
              };

              console.log('Пользователь зарегистрирован');
              this.progress = false;
            } else {
              this.errors = this.mapErrorObject(resp.errors);
              this.$refs.reg_form.validate();
              this.errors = {};
              console.log('Пользователь не зарегистрирован');
              console.log(resp);
              this.progress = false;
            }
          })
          .catch((e) => {
            console.error(e);
            this.progress = false;
          });
        window.smartCaptcha.reset(this.yandex_widgetId);
      }
    },
  },
};
</script>
<style scoped></style>
<style>
.input-vue-tel-input-in-qfield {
  border-left: 0;
  border-right: 0;
  outline: none;
  color: black;
}

.dark-theme {
  color: white;
  background: var(--q-color-dark);
}

.light-theme {
  color: black;
  background: unset;
}
.vti__dropdown {
  display: none;
}
</style>
