<template>
  <q-page :style-fn="myTweak" padding>
    <q-card flat bordered style="max-width: 1200px" class="q-mx-auto">
      <q-card-section>
        <div class="text-h6">Регистрация в Universo</div>

        <div class="text-subtitle2 text-grey">
          Пройдите все этапы регистрации
        </div>
      </q-card-section>
      <q-separator />
      <q-card-section>
        <div class="page-style">
          <q-stepper
            flat
            contracted
            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
              :dark="dark"
              :done="step > 1"
              :name="1"
              :step="1"
              :title="$q.screen.width > 1000 ? steps[0].text : ''"
              icon="settings"
            >
              <p>
                На следующих шагах вы можете зарегистрироваться на портале
                universo.pro.
              </p>
              <p>
                Нажимая кнопку "Принимаю" вы соглашаетесь с
                <router-link
                  :to="{ name: 'privacypolicy' }"
                  target="_blank"
                  style="color: rgba(0, 0, 0, 0.4)"
                  >Политикой в отношении обработки персональных
                  данных</router-link
                >.
              </p>
              <p>
                После регистрации вы сможете воспользоваться полным функционалом
                портала.
              </p>

              <div class="row justify-end">
                <q-btn flat outlined @click="step++">
                  <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>
            <q-step
              :done="step > 2"
              :name="2"
              :step="2"
              :title="$q.screen.width > 1000 ? steps[1].text : ''"
              icon="settings"
            >
              <reg-form @success="step++" />
            </q-step>
            <q-step
              :done="step > 3"
              :name="3"
              :step="3"
              :title="$q.screen.width > 1000 ? steps[2].text : ''"
              icon="settings"
            >
              <confirm-form @success="step++" />
            </q-step>
            <q-step
              :name="4"
              :step="4"
              :title="$q.screen.width > 1000 ? steps[3].text : ''"
              icon="settings"
            >
              <p>Вы зарегистрировали вашу учётную запись.</p>
              <p>Для входа воспользуйтесь формой входа на сайт .</p>

              <div v-if="step === 4" class="row justify-end">
                <q-btn flat outlined :to="{ name: 'login' }">
                  <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 ? 'Finish' : 'Continue'"
                  color="primary"
                  @click="$refs.stepper.next()"
                />
                <q-btn
                  v-if="step > 1"
                  class="q-ml-sm"
                  color="primary"
                  flat
                  label="Back"
                  @click="$refs.stepper.previous()"
                />
              </q-stepper-navigation>
            </template> -->
          </q-stepper>
        </div>
      </q-card-section>
    </q-card>
  </q-page>
</template>
<script>
import { defineAsyncComponent, defineComponent } from 'vue';
import { mapState, mapActions, mapWritableState } from 'pinia';
import { useRegistradoStore } from 'src/stores/registrado';
import { useCurrentUserStore } from 'src/stores/current-user';
import { useUiStore } from 'src/stores/UI';

export default defineComponent({
  name: 'RegistradoUzanto',
  components: {
    RegForm: defineAsyncComponent(() => import('../components/RegForm')),
    ConfirmForm: defineAsyncComponent(() =>
      import('../components/ConfirmForm'),
    ),
  },

  data() {
    return {
      steps: [
        { step: 1, text: 'Соглашение' },
        { step: 2, text: 'Данные регистрации' },
        { step: 3, text: 'Подтверждение регистрации' },
        { step: 4, text: 'Завершение регистрации' },
      ],
      step: 1,
    };
  },

  computed: {
    ...mapState(useCurrentUserStore, ['isLoggedIn']),
    ...mapState(useCurrentUserStore, { authData: 'getAuthData' }),

    ...mapState(useUiStore, ['dark', 'isLoading']),
    ...mapWritableState(useUiStore, ['showLoginForm']),

    ...mapWritableState(useCurrentUserStore, ['konfirmita', '']),
    ...mapWritableState(useRegistradoStore, {
      storedEmail: 'email',
      storedPassword: 'password',
    }),
  },

  watch: {
    authData: function (cur) {
      if (typeof cur === 'object') {
        if (Object.prototype.hasOwnProperty.call(cur, 'login')) {
          const { login, password } = cur;
          this.storedEmail = login;
          this.storedPassword = password;
        }
      }
    },
    step: function (cur) {
      if (cur === 4)
        // this.$root.$emit('show-login-form');
        this.showLoginForm = true;
    },
    isLoggedIn: function (cur, old) {
      if (cur) {
        // console.error('Watch. Уже залогинен. Переходим на главную страницу');
        this.$router.push('/');
      }
    },

    konfirmita: function (cur, old) {
      if (cur === false) {
        this.step = 3;
      }
    },
  },

  beforeMount() {
    if (this.konfirmita === false) {
      this.step = 3;
      this.konfirmita = null;
    }

    if (this.isLoggedIn) {
      // console.error('beforeMount. Уже залогинен. Переходим на главную страницу');
      this.$router.push('/');
    }
  },

  methods: {
    // setAuthData({login, password}) {
    //   this.$store.commit('registrado/setEmail', login);
    //   this.$store.commit('registrado/setPassword', password);
    // },
  },
  // mounted() {
  //   // Слушаем глобальную шину
  //   // this.$root.$on('authdata', this.setAuthData);
  // },

  // beforeDestroy() {
  //   // Отключаемся от глобальной шины
  //   // this.$root.$off('authdata', this.setAuthData);
  // },
});
</script>
<style scoped>
.stepper-style {
  /* min-width: 100%; */
}
</style>
<style scoped></style>
