<template>
  <div>
    <div
      v-if="tools.isLogged() && tools.getUsername() && !collettivo"
      class="text-center"
    >
      <q-banner rounded class="bg-green text-white" style="text-align: center">
        <span class="mybanner">
          {{ tools.getUsername() }} sei già correttamente registrato ed hai
          accesso alla Piattaforma<br />
        </span>
      </q-banner>

      <div class="row q-ma-sm q-pa-sm justify-center">
        <q-btn
          class="q-ma-sm"
          color="primary"
          icon="fas fa-home"
          label="Vai alla Home"
          to="/"
        ></q-btn>

        <q-btn
          class="q-ma-sm"
          color="accent"
          icon="fas fa-sign"
          label="Voglio vedere la pagina di Registrazione"
          @click="visureg = true"
        ></q-btn>
        <br />
      </div>
    </div>
    <div v-if="!tools.isLogged() || visureg || collettivo" class="text-center">
      <div>
        <div>
          <logo
            mystyle="width: 60px !important; height: 60px !important; "
          ></logo>

          <div v-if="!isalreadyReg && !(visubuttBOT && needTelegram)">
            <CTitleBanner :title="$t('pages.SignUp')"></CTitleBanner>
          </div>
        </div>
      </div>

      <div
        v-if="visubuttBOT && needTelegram && !collettivo"
        class="q-gutter-md"
      >
        <div class="q-ma-md">
          <CRegistration
            :invited="signup.aportador_solidario"
            :regexpire="regexpire"
            @regEventEmail="regEventEmail"
            :signupform="true"
          />
        </div>
      </div>

      <div v-else-if="!isalreadyReg || collettivo" class="q-gutter-sm q-mt-sm">
        <div v-if="signup.username === 'undefined'">
          <br />
          Vai su <b>BOT RISO</b> Telegram ed imposta l'Username di Telegram.<br /><br />
          <q-btn
            rounded
            color="primary"
            icon="fab fa-telegram"
            label="Apri BOT"
            type="a"
            :href="
              tools.getLinkBotTelegram(signup.aportador_solidario, regexpire)
            "
            target="_blank"
          ></q-btn>
          <br /><br />
        </div>
        <div v-else>
          <div v-if="signup.terms">
            <q-input
              v-if="
                showaportador &&
                signup.aportador_solidario !== tools.APORTADOR_NONE &&
                v$.aportador_solidario.$error
              "
              ref="inputAportador"
              bg-color="light-blue-4"
              :readonly="!!ap_iniziale"
              v-model="signup.aportador_solidario"
              rounded
              outlined
              @keyup.enter="
                v$.aportador_solidario.$touch && !v$.aportador_solidario.$error
                  ? $refs.inputEmail.focus()
                  : null
              "
              @blur="v$.aportador_solidario.$touch"
              :error="v$.aportador_solidario.$error"
              :error-message="
                tools.errorMsg('aportador_solidario', v$.aportador_solidario)
              "
              maxlength="20"
              debounce="1000"
              :label="
                collettivo
                  ? $t('reg.username_admin_collettivo')
                  : $t('reg.aportador_solidario')
              "
            >
              <template v-slot:prepend>
                <q-icon name="person" />
              </template>
            </q-input>
            <div style="margin-top: 5px"></div>

            <q-input
              ref="inputEmail"
              v-model="signup.email"
              rounded
              outlined
              @update:model-value="changeemail()"
              maxlength="50"
              v-on:keyup.enter="!checkifDisabled ? $refs.carousel.next() : null"
              debounce="2000"
              :rules="[myRuleEmail]"
              :label="
                collettivo
                  ? $t('reg.email_reg_collettivo')
                  : $t('reg.email_reg')
              "
            >
              <template v-slot:prepend>
                <q-icon name="email" />
              </template>
            </q-input>

            <q-input
              ref="inputUsername"
              v-model="signup.username"
              :readonly="
                tools.getAskToVerifyReg() &&
                !site.confpages?.enableRegMultiChoice
              "
              rounded
              outlined
              @blur="v$.username.$touch"
              @update:model-value="changeusername"
              :error="v$.username.$error"
              @keydown.space="(event) => event.preventDefault()"
              @keyup.enter="
                !v$.username.$error ? $refs.inputName.focus() : null
              "
              maxlength="20"
              debounce="500"
              :error-message="
                tools.errorMsg('username', v$.username) ||
                (isalreadyReg ? 'L\'Username è gia stato registrato!' : '')
              "
              :label="
                tools.getConfSiteOptionEnabled(
                  shared_consts.ConfSite.askUSernameTelegramToTheReg
                )
                  ? $t('reg.username_telegram')
                  : $t('reg.username_reg')
              "
            >
              <template v-slot:prepend>
                <q-icon name="person" />
              </template>
            </q-input>

            <div v-if="collettivo">
              <q-input
                ref="inputName"
                v-model="signup.name"
                rounded
                outlined
                @blur="v$.name.$touch"
                :error="v$.name.$error"
                maxlength="30"
                debounce="1000"
                v-on:keyup.enter="
                  !checkifDisabled ? $refs.carousel.next() : null
                "
                :error-message="tools.errorMsg('name', v$.name)"
                :label="$t('reg.name_opt_collettivo')"
              >
                <template v-slot:prepend>
                  <q-icon name="person" />
                </template>
              </q-input>
            </div>

            <div v-else-if="show_namesurname">
              <q-input
                ref="inputName"
                v-model="signup.name"
                rounded
                outlined
                @blur="v$.name.$touch"
                :error="v$.name.$error"
                maxlength="30"
                debounce="1000"
                @keyup.enter="$refs.inputSurname.focus()"
                :error-message="tools.errorMsg('name', v$.name)"
                :label="
                  tools.getConfSiteOptionEnabled(
                    shared_consts.ConfSite.regNameSurnameMandatory
                  )
                    ? $t('reg.name')
                    : $t('reg.name_opt')
                "
              >
                <template v-slot:prepend>
                  <q-icon name="person" />
                </template>
              </q-input>

              <q-input
                v-if="signup.surname"
                ref="inputSurname"
                v-model="signup.surname"
                rounded
                outlined
                :error="v$.surname.$error"
                @blur="v$.surname.$touch"
                maxlength="30"
                debounce="1000"
                v-on:keyup.enter="
                  !checkifDisabled ? $refs.carousel.next() : null
                "
                :error-message="tools.errorMsg('surname', v$.surname)"
                :label="$t('reg.surname_opt')"
              >
                <template v-slot:prepend>
                  <q-icon name="person" />
                </template>
              </q-input>
              <q-input
                ref="inputPassword"
                v-model="signup.password"
                :type="typePassword"
                rounded
                outlined
                @blur="v$.password.$touch"
                :error="v$.password.$error"
                :error-message="`${tools.errorMsg('password', v$.password)}`"
                @keyup.enter="
                  !v$.password.$error ? $refs.inputPassword2.focus() : null
                "
                maxlength="30"
                debounce="1000"
                :label="$t('reg.password_reg')"
              >
                <template v-slot:append>
                  <q-btn
                    tabindex="-1"
                    :icon="
                      typePassword === `password`
                        ? `fas fa-eye-slash`
                        : `fas fa-eye`
                    "
                    @click="showPassword"
                  >
                  </q-btn>
                </template>
                <template v-slot:prepend>
                  <q-icon name="vpn_key" />
                </template>
              </q-input>
            </div>

            <q-input
              ref="inputPassword2"
              v-model="signup.repeatPassword"
              :type="typePassword"
              maxlength="30"
              rounded
              outlined
              @blur="v$.repeatPassword.$touch"
              :error="v$.repeatPassword.$error"
              :error-message="`${tools.errorMsg(
                'repeatpassword',
                v$.repeatPassword
              )}`"
              v-on:keyup.enter="!checkifDisabled ? $refs.carousel.next() : null"
              :label="$t('reg.repeatPassword')"
            >
              <template v-slot:append>
                <q-btn
                  tabindex="-1"
                  :icon="
                    typePassword === `password`
                      ? `fas fa-eye-slash`
                      : `fas fa-eye`
                  "
                  @click="showPassword"
                >
                </q-btn>
              </template>
              <template v-slot:prepend>
                <q-icon name="vpn_key" />
              </template>
            </q-input>

            <div class="column">
              <q-btn
                rounded
                size="lg"
                color="positive"
                @click="submitOk"
                :label="$t('reg.submit')"
              >
              </q-btn>
              <br />
            </div>
          </div>
          <div v-else>
            <q-carousel
              v-model="slide"
              ref="carousel"
              transition-prev="slide-right"
              transition-next="slide-left"
              animated
              swipeable
              :class="`shadow-1`"
            >
              <template v-slot:control>
                <q-carousel-control
                  position="bottom-right"
                  :offset="[18, 18]"
                  class="q-gutter-xs"
                >
                  <q-btn
                    v-if="slide !== '1'"
                    push
                    text-color="black"
                    icon="arrow_left"
                    :label="$t('dialog.indietro')"
                    @click="$refs.carousel.previous()"
                  />
                  <q-btn
                    v-if="slide !== '4'"
                    push
                    color="primary"
                    icon="arrow_right"
                    :label="$t('dialog.avanti')"
                    :disabled="checkifDisabled"
                    @click="!checkifDisabled ? $refs.carousel.next() : null"
                  />
                </q-carousel-control>
              </template>
              <q-carousel-slide name="1">
                <div class="">
                  <q-input
                    v-if="
                      showaportador &&
                      signup.aportador_solidario !== tools.APORTADOR_NONE
                    "
                    ref="inputAportador"
                    bg-color="light-blue-4"
                    :readonly="!!ap_iniziale"
                    v-model="signup.aportador_solidario"
                    rounded
                    outlined
                    @keyup.enter="
                      v$.aportador_solidario.$touch &&
                      !v$.aportador_solidario.$error
                        ? $refs.inputEmail.focus()
                        : null
                    "
                    @blur="v$.aportador_solidario.$touch"
                    :error="v$.aportador_solidario.$error"
                    :error-message="
                      tools.errorMsg(
                        'aportador_solidario',
                        v$.aportador_solidario
                      )
                    "
                    maxlength="20"
                    debounce="1000"
                    :label="
                      collettivo
                        ? $t('reg.username_admin_collettivo')
                        : $t('reg.aportador_solidario')
                    "
                  >
                    <template v-slot:prepend>
                      <q-icon name="person" />
                    </template>
                  </q-input>
                  <div style="margin-top: 5px"></div>

                  <q-input
                    ref="inputEmail"
                    v-model="signup.email"
                    rounded
                    outlined
                    @update:model-value="changeemail()"
                    maxlength="50"
                    v-on:keyup.enter="
                      !checkifDisabled ? $refs.carousel.next() : null
                    "
                    debounce="2000"
                    :rules="[myRuleEmail]"
                    :label="
                      collettivo
                        ? $t('reg.email_reg_collettivo')
                        : $t('reg.email_reg')
                    "
                  >
                    <template v-slot:prepend>
                      <q-icon name="email" />
                    </template>
                  </q-input>
                </div>
              </q-carousel-slide>
              <q-carousel-slide name="2">
                <div class="cosa_chiedere">{{ $t('reg.scegli_username') }}</div>
                <q-input
                  ref="inputUsername"
                  v-model="signup.username"
                  :readonly="
                    tools.getAskToVerifyReg() &&
                    !site.confpages?.enableRegMultiChoice
                  "
                  rounded
                  outlined
                  @blur="v$.username.$touch"
                  @update:model-value="changeusername"
                  :error="v$.username.$error"
                  @keydown.space="(event) => event.preventDefault()"
                  @keyup.enter="
                    !v$.username.$error ? $refs.inputName.focus() : null
                  "
                  maxlength="20"
                  debounce="500"
                  :error-message="
                    tools.errorMsg('username', v$.username) ||
                    (isalreadyReg ? 'L\'Username è gia stato registrato!' : '')
                  "
                  :label="
                    collettivo
                      ? $t('reg.username_reg_collettivo')
                      : tools.getConfSiteOptionEnabled(
                          shared_consts.ConfSite.askUSernameTelegramToTheReg
                        )
                      ? $t('reg.username_telegram')
                      : $t('reg.username_reg')
                  "
                >
                  <template v-slot:prepend>
                    <q-icon name="person" />
                  </template>
                </q-input>

                <div v-if="collettivo">
                  <q-input
                    ref="inputName"
                    v-model="signup.name"
                    rounded
                    outlined
                    @blur="v$.name.$touch"
                    :error="v$.name.$error"
                    maxlength="30"
                    debounce="1000"
                    v-on:keyup.enter="
                      !checkifDisabled ? $refs.carousel.next() : null
                    "
                    :error-message="tools.errorMsg('name', v$.name)"
                    :label="$t('reg.name_opt_collettivo')"
                  >
                    <template v-slot:prepend>
                      <q-icon name="person" />
                    </template>
                  </q-input>
                </div>

                <div v-else-if="show_namesurname">
                  <q-input
                    ref="inputName"
                    v-model="signup.name"
                    rounded
                    outlined
                    @blur="v$.name.$touch"
                    :error="v$.name.$error"
                    maxlength="30"
                    debounce="1000"
                    @keyup.enter="$refs.inputSurname.focus()"
                    :error-message="tools.errorMsg('name', v$.name)"
                    :label="
                      tools.getConfSiteOptionEnabled(
                        shared_consts.ConfSite.regNameSurnameMandatory
                      )
                        ? $t('reg.name')
                        : $t('reg.name_opt')
                    "
                  >
                    <template v-slot:prepend>
                      <q-icon name="person" />
                    </template>
                  </q-input>

                  <q-input
                    ref="inputSurname"
                    v-model="signup.surname"
                    rounded
                    outlined
                    :error="v$.surname.$error"
                    @blur="v$.surname.$touch"
                    maxlength="30"
                    debounce="1000"
                    v-on:keyup.enter="
                      !checkifDisabled ? $refs.carousel.next() : null
                    "
                    :error-message="tools.errorMsg('surname', v$.surname)"
                    :label="
                      tools.getConfSiteOptionEnabled(
                        shared_consts.ConfSite.regNameSurnameMandatory
                      )
                        ? $t('reg.surname')
                        : $t('reg.surname_opt')
                    "
                  >
                    <template v-slot:prepend>
                      <q-icon name="person" />
                    </template>
                  </q-input>
                </div>
              </q-carousel-slide>
              <q-carousel-slide name="3">
                <div class="cosa_chiedere">{{ $t('reg.scegli_password') }}</div>
                <q-input
                  ref="inputPassword"
                  v-model="signup.password"
                  class="q-mb-md"
                  :type="typePassword"
                  rounded
                  outlined
                  @blur="v$.password.$touch"
                  :error="v$.password.$error"
                  :error-message="`${tools.errorMsg('password', v$.password)}`"
                  @keyup.enter="
                    !v$.password.$error ? $refs.inputPassword2.focus() : null
                  "
                  maxlength="30"
                  debounce="1000"
                  :label="$t('reg.password_reg')"
                >
                  <template v-slot:append>
                    <q-btn
                      tabindex="-1"
                      :icon="
                        typePassword === `password`
                          ? `fas fa-eye-slash`
                          : `fas fa-eye`
                      "
                      @click="showPassword"
                    >
                    </q-btn>
                  </template>
                  <template v-slot:prepend>
                    <q-icon name="vpn_key" />
                  </template>
                </q-input>

                <q-input
                  ref="inputPassword2"
                  v-model="signup.repeatPassword"
                  :type="typePassword"
                  maxlength="30"
                  rounded
                  outlined
                  @blur="v$.repeatPassword.$touch"
                  :error="v$.repeatPassword.$error"
                  :error-message="`${tools.errorMsg(
                    'repeatpassword',
                    v$.repeatPassword
                  )}`"
                  v-on:keyup.enter="
                    !checkifDisabled ? $refs.carousel.next() : null
                  "
                  :label="$t('reg.repeatPassword')"
                >
                  <template v-slot:append>
                    <q-btn
                      tabindex="-1"
                      :icon="
                        typePassword === `password`
                          ? `fas fa-eye-slash`
                          : `fas fa-eye`
                      "
                      @click="showPassword"
                    >
                    </q-btn>
                  </template>
                  <template v-slot:prepend>
                    <q-icon name="vpn_key" />
                  </template>
                </q-input>
              </q-carousel-slide>
              <q-carousel-slide name="4">
                <q-input
                  v-if="shownationality"
                  v-model="countryname"
                  :readonly="true"
                  rounded
                  outlined
                  debounce="1000"
                  :label="$t('reg.nationality')"
                >
                  <template v-slot:prepend>
                    <!--<vue-country-code
                  @onSelect="selectcountry"
                  :preferredCountries="tools.getprefCountries"
                  :dropdownOptions="{ disabledDialCode: true }"
                >

                </vue-country-code>-->
                  </template>
                </q-input>

                <!--<vue-tel-input
              v-if="showcell"
              @country-changed="intcode_change()"
              :value="signup.profile.cell"
              :placeholder="$t('reg.cell')"
              maxlength="20"
              :enabledCountryCode="true"
              inputClasses="clCell"
              wrapperClasses="clCellCode">
            </vue-tel-input>-->

                <div class="text-center">
                  <q-btn
                    label="Mostra Privacy"
                    @click="showpolicy = true"
                  ></q-btn>
                </div>

                <q-dialog v-model="showpolicy">
                  <q-card class="dialog_card">
                    <q-toolbar class="bg-primary text-white">
                      <q-toolbar-title> Privacy Policy </q-toolbar-title>
                      <q-btn
                        flat
                        round
                        color="white"
                        icon="close"
                        v-close-popup
                      ></q-btn>
                    </q-toolbar>
                    <q-card-section class="inset-shadow">
                      <PagePolicy
                        v-if="site.policy"
                        :owneremail="site.policy.owneremail"
                        :siteName="site.policy.siteName"
                        :ownerDataName="site.policy.ownerDataName"
                        :managerData="site.policy.managerData"
                        :includeData="site.policy.includeData"
                        :url="site.policy.url"
                        :lastdataupdate="site.policy.lastdataupdate"
                        :country="site.policy.country"
                      >
                      </PagePolicy>
                    </q-card-section>
                  </q-card>
                </q-dialog>

                <q-checkbox
                  v-model="signup.terms"
                  color="secondary"
                  @blur="v$.terms.$touch"
                  :error="v$.terms.$error"
                  :error-message="`${tools.errorMsg('terms', v$.terms)}`"
                  :label="$t('reg.terms')"
                >
                </q-checkbox>

                <q-checkbox
                  v-if="showadultcheck"
                  v-model="iamadult"
                  color="secondary"
                  :label="$t('reg.onlyadult')"
                >
                </q-checkbox>

                <div v-if="showadultcheck">
                  <br />
                </div>

                <!--
                Già registrato?
                <q-btn
                  class="q-ma-sm"
                  text-color="black"
                  color="white"
                  icon="fas fa-home"
                  label="Accedi"
                  to="/"
                  size="sm"
                ></q-btn>
                <br /><br /><br />
                -->
              </q-carousel-slide>
            </q-carousel>
          </div>

          <div class="row justify-center">
            <q-btn-toggle
              v-if="!signup.terms"
              glossy
              v-model="slide"
              :options="[
                { label: 1, value: '1' },
                { label: 2, value: '2' },
                { label: 3, value: '3' },
                { label: 4, value: '4' },
              ]"
            />
          </div>
        </div>
      </div>
      <div v-else-if="isalreadyReg && !collettivo">
        <q-banner
          class="bg-negative text-white text-h5"
          transition-show="jump-down"
        >
          Utente già registrato con l'username {{ signup.username }}
        </q-banner>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./CSignUp.ts">
</script>
<style lang="scss" scoped>
@import './CSignUp.scss';
</style>
