<template>
  <div v-if="contact">
    <div class="row items-center">
      <div
        v-if="progressStep !== 1"
        :class="indstep >= numindstep ? 'col-10' : 'col-12'"
      >
        <CTitleBanner
          class="q-pa-none"
          :title="
            !progressStep
              ? $t('tutorial.title', { indstep: indstep + 1, numindstep }) +
                ` (` +
                progressLabel +
                `)`
              : $t('tutorial.title_completed', {
                  indstep: indstep + 1,
                  numindstep,
                }) +
                ` (` +
                progressLabel +
                `)`
          "
          :bgcolor="getColorTutorial()"
          clcolor="text-white"
          myclass="myshad"
          :canopen="!completed()"
        >
          <q-slide-transition>
            <div v-show="indstep < numindstep">
              <!--<div class="q-my-sm">
                <q-linear-progress
                  stripe
                  size="25px"
                  :value="progressStep"
                  :color="getColor()"
                >
                  <div class="absolute-full flex flex-center">
                    <q-badge
                      color="white"
                      text-color="accent"
                      :label="
                        $t('tutorial.completed_step', { perc: progressLabel })
                      "
                    />
                  </div>
                </q-linear-progress>
              </div>
              -->
              <!--<CMyUserOnlyView
                :mycontact="contact"
                :visu="costanti.FIND_PEOPLE"
              >
              </CMyUserOnlyView>-->

              <div class="">
                <q-stepper
                  v-model="indstep"
                  ref="stepper"
                  color="primary"
                  animated
                  vertical
                  :header-nav="!!contact.profile.resid_province"
                >
                  <q-step
                    v-for="(recstep, index) in arrStep"
                    :key="index"
                    :name="recstep.indstep"
                    :title="recstep.title + recstep.extratitle()"
                    :icon="recstep.icon"
                    :done="recstep.checkOk()"
                    :done-color="getColorDone(index)"
                  >
                    <div v-html="recstep.label"></div>
                    <br />
                    <q-banner v-if="recstep.step === STEP_CITY">
                      <CMySelectCity
                        :label="$t('reg.resid_province')"
                        table="users"
                        jointable="provinces"
                        v-model="contact.profile.resid_province"
                        myclass="selectorwide text-white"
                        :db_type="costanti.FieldType.string"
                        db_field="profile"
                        db_subfield="resid_province"
                        :db_id="contact._id"
                        :db_rec="contact"
                      >
                      </CMySelectCity>

                      <CMySelectCity
                        v-if="
                          globalStore.isPresenteCardsByProv(
                            contact.profile.resid_province
                          )
                        "
                        :label="$t('reg.resid_card')"
                        table="users"
                        jointable="cards"
                        v-model="contact.profile.resid_card"
                        myclass="selectorwide text-white"
                        :db_type="costanti.FieldType.string"
                        db_field="profile"
                        db_subfield="resid_card"
                        :db_id="contact._id"
                        :db_rec="contact"
                        :value2="contact.profile.resid_province"
                      >
                      </CMySelectCity>
                    </q-banner>
                    <div v-else-if="step === STEP_NAME_SURNAME">
                      <q-banner>
                        <div class="myrow">
                          <CMyFieldDb
                            :title="$t('reg.name')"
                            table="users"
                            mykey="name"
                            :hint="$t('reg.insert_name')"
                            :type="costanti.FieldType.string"
                          >
                          </CMyFieldDb>
                        </div>
                        <div class="myrow">
                          <CMyFieldDb
                            :title="$t('reg.surname')"
                            table="users"
                            mykey="surname"
                            :hint="$t('reg.insert_surname')"
                            :type="costanti.FieldType.string"
                          >
                          </CMyFieldDb>
                        </div>
                      </q-banner>
                    </div>
                    <div
                      v-else-if="
                        step === STEP_CIRCUIT || step === STEP_CIRCUIT_ITALIA
                      "
                      class=""
                    >
                      <q-select
                        v-if="mylistcircuits && mylistcircuits.length > 1"
                        :behavior="
                          $q.platform.is.ios === true ? 'dialog' : 'menu'
                        "
                        rounded
                        dense
                        outlined
                        v-model="circuitsel"
                        :options="mylistcircuits"
                        label="SCegli il Circuito della tua Zona:"
                      >
                      </q-select>

                      <CMyCircuit
                        v-if="step === STEP_CIRCUIT"
                        :mycircuit="mycircuit"
                        :visu="costanti.ENTER_TO_THE_CIRCUIT"
                        :username="contact.username"
                      >
                      </CMyCircuit>
                      <CMyCircuit
                        v-if="step === STEP_CIRCUIT_ITALIA"
                        :mycircuit="circuititalia"
                        :visu="costanti.ENTER_TO_THE_CIRCUIT"
                        :username="contact.username"
                      >
                      </CMyCircuit>
                    </div>
                    <div v-else-if="step === 300" class="">
                      <!--
                      <div
                        v-for="(card, ind) of mycards"
                        :key="ind"
                        :name="card.table"
                      >
                        <q-card class="q-my-md">
                          <div>
                            <CSkill
                              v-if="false"
                              :table="card.table"
                              :filtercustom="filtroutente"
                              :butt_modif_new="true"
                              :visuinpage="true"
                              :noaut="true"
                              :title="card.title"
                            />
                          </div>
                        </q-card>
                      </div>
                      -->
                    </div>

                    <div v-else-if="step === STEP_FOTO" class="">
                      <div class="myrow">
                        <!--<CMyFieldDb
                          :title="$t('reg.photo')"
                          table="users"
                          mykey="profile"
                          mysubkey="img"
                          :type="costanti.FieldType.image"
                        >
                        </CMyFieldDb>-->
                      </div>

                      <q-btn
                        glossy
                        label="Modifica Profilo"
                        icon="fas fa-pencil-alt"
                        color="primary"
                        to="/editprofile"
                      />
                    </div>

                    <div
                      v-if="recstep.checkOkReal() && recstep.label_ok"
                      class="clBorderService"
                      v-html="recstep.label_ok"
                    ></div>
                    <q-stepper-navigation>
                      <q-btn
                        v-if="recstep.indstep > 1"
                        flat
                        color="primary"
                        @click="$refs.stepper.previous()"
                        :label="$t('dialog.indietro')"
                        class="q-ml-sm"
                      />
                      <q-btn
                        :flat="isSalta(recstep.step)"
                        :disabled="isNextDisable(recstep.step)"
                        @click="
                          isSalta(recstep.step)
                            ? askToConfirmSkip(recstep.step)
                            : recstep.indstep === numindstep
                            ? clickFinish()
                            : $refs.stepper.next()
                        "
                        :color="isSalta(recstep.step) ? 'negative' : 'primary'"
                        :label="
                          recstep.indstep === numindstep
                            ? $t('dialog.finish')
                            : isSalta(recstep.step)
                            ? $t('dialog.salta')
                            : $t('dialog.avanti')
                        "
                      />
                    </q-stepper-navigation>
                  </q-step>
                </q-stepper>
              </div>
            </div>
          </q-slide-transition>
        </CTitleBanner>
      </div>
      <q-btn
        v-if="indstep >= numindstep && progressStep !== 1"
        :class="`col-2 ` + getColorTutorial()"
        icon="fas fa-arrow-right"
        color="text-white"
        dense
        size="md"
        :label="$t('dialog.vai')"
        @click="indstep = 1"
      >
      </q-btn>

      <q-banner
        inline-actions
        class="bg-blue text-white row"
        v-if="userstoverify.length > 0 && showBanner_utenti_verif"
      >
        <div v-html="$t('tutorial.utenti_da_verificare')"></div>
        <template v-slot:action>
          <q-btn
            :label="
              userstoverify.length + ' ' + $t('tutorial.utenti_da_verif_btn')
            "
            class="q-my-sm"
            rounded
            icon="fas fa-users"
            @click="
              usersList.show = true;
              usersList.title = $t('tutorial.utenti_da_verif_btn');
            "
          />
          <q-btn
            icon="fas fa-times"
            class="q-my-sm"
            flat
            @click="showBanner_utenti_verif = false"
            aria-label="Chiudi"
          />
        </template>
      </q-banner>

      <q-banner
        inline-actions
        class="bg-red text-white"
        v-if="
          userStore.my.profile.calc.numGoodsAndServices <= 0 &&
          !nascondiavviso &&
          tools.visualizzaHomeApp()
        "
      >
        <span v-html="$t('tutorial.step_beniservizi')"></span>
        <template v-slot:action>
          <q-btn
            flat
            color="white"
            label="Chiudi"
            @click="nascondiavviso = true"
          />
        </template>
      </q-banner>
    </div>
  </div>
  <q-dialog v-model="usersList.show">
    <q-card class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ usersList.title }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>

      <q-card-section class="inset-shadow">
        <q-list>
          <span
            v-for="(rec, index) in userstoverify"
            :key="index"
            class="q-my-sm rounded-borders"
            clickable
          >
            <CMyUser
              :mycontact="rec"
              :visu="costanti.ASK_TRUST"
              @setCmd="tools.setCmd"
            >
            </CMyUser>
          </span>
        </q-list>
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-dialog v-model="showAccountInfo" full-height full-width>
    <q-card v-if="true">
      <q-toolbar class="bg-primary">
        <q-toolbar-title class="text-h7">
          {{ tools.getNomeUtenteEUsernameByRecUser(contact) }}
        </q-toolbar-title>
        <q-btn flat round icon="close" v-close-popup></q-btn>
      </q-toolbar>
    </q-card>
  </q-dialog>
</template>

<script lang="ts" src="./CMyProfileTutorial.ts">
</script>

<style lang="scss">
@import './CMyProfileTutorial.scss';
</style>
