<template>
  <div v-if="contact">
    <div class="row items-center">
      <div :class="step >= numstep ? 'col-10' : 'col-12'">
        <CTitleBanner
          class="q-pa-none"
          :title="
            (!progressStep
              ? $t('tutorial.title', {step, numstep}) + ` (` + progressLabel + `)`
              : $t('tutorial.title_completed', {step, numstep}) + ` (` + progressLabel + `)`)

          "
          :bgcolor="getColorTutorial()"
          clcolor="text-white"
          myclass="myshad"
          :canopen="!completed()"
        >
          <q-slide-transition>
            <div v-show="step < numstep">
              <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="step"
                  ref="stepper"
                  color="primary"
                  animated
                  vertical
                  :header-nav="!!contact.profile.resid_province"
                >
                  <q-step
                    v-for="(recstep, index) in arrStep"
                    :key="index"
                    :name="recstep.step"
                    :title="recstep.title + recstep.extratitle()"
                    :icon="recstep.icon"
                    :done="recstep.checkOk()"
                    :done-color="getColorDone(recstep.step)"
                  >
                    <div
                      v-if="recstep.checkOk() && recstep.label_ok"
                      v-html="recstep.label_ok"
                    ></div>
                    <div v-else v-html="recstep.label"></div>
                    <br />
                    <q-banner v-if="step === 1" class="bg-blue-8 text-white">
                      <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>
                    </q-banner>
                    <div v-else-if="step === 2">
                      <q-banner class="bg-blue-8 text-white">
                        <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 === 3" class="">
                      <CMyCircuit
                        :mycircuit="mycircuit"
                        :visu="costanti.ENTER_TO_THE_CIRCUIT"
                      >
                      </CMyCircuit>
                    </div>
                    <div v-else-if="step === 4" class="">
                      <div
                        v-for="(card, ind) of mycards"
                        :key="ind"
                        :name="card.table"
                      >
                        <q-card class="q-my-md">
                          <div>
                            <CSkill
                              :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 === 5" class="">
                      <div class="myrow">
                        <CMyFieldDb
                          :title="$t('reg.photo')"
                          table="users"
                          mykey="profile"
                          mysubkey="img"
                          :type="costanti.FieldType.image"
                        >
                        </CMyFieldDb>
                      </div>

                      {{ $t('tutorial.step_altri_in_profilo') }}
                      <q-btn
                        glossy
                        label="Modifica Profilo"
                        icon="fas fa-pencil-alt"
                        color="primary"
                        to="/editprofile"
                      />
                    </div>

                    <div v-else-if="step === 6" class=""></div>
                    <q-stepper-navigation>
                      <q-btn
                        v-if="step > 1"
                        flat
                        color="primary"
                        @click="$refs.stepper.previous()"
                        :label="$t('dialog.indietro')"
                        class="q-ml-sm"
                      />
                      <q-btn
                        :flat="isSalta()"
                        :disabled="isNextDisable()"
                        @click="(step === STEP_CIRCUIT && isSalta()) ? askToConfirmSkip() :
                          (step === numstep
                            ? clickFinish()
                            : $refs.stepper.next())
                        "
                        :color="isSalta() ? 'negative' : 'primary'"
                        :label="
                          step === numstep
                            ? $t('dialog.finish')
                            : (isSalta() ? $t('dialog.salta'): $t('dialog.avanti'))
                        "
                      />
                    </q-stepper-navigation>
                  </q-step>
                </q-stepper>
              </div>
            </div>
          </q-slide-transition>
        </CTitleBanner>
      </div>
      <q-btn
        v-if="step >= numstep"
        :class="`col-2 ` + getColorTutorial()"
        icon="fas fa-arrow-right"
        color="text-white"
        dense
        size="md"
        :label="$t('dialog.vai')"
        @click="step = 1"
      >
      </q-btn>
    </div>
  </div>
  <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>
