<template>
  <div
    v-if="!caricato"
    class="fit column no-wrap justify-evenly items-center content-start"
  >
    <q-card flat bordered style="width: 250px">
      <div class="text-h6">
        <q-skeleton :animation="animation" />
      </div>
      <div class="col-12 text-h7 text-grey text-center">
        {{ username }}
      </div>
    </q-card>
  </div>
  <div v-else>
    <div v-if="myuser">
      <div v-if="tools.isUserOk() || tools.isLogged()">
        <div v-if="introUser">
          <CNotifAtTop />
        </div>
      </div>
      <div class="q-gutter-sm q-pa-sm q-pb-md">
        <div
          v-if="myuser && myuser.lang"
          class="fit column no-wrap justify-evenly items-center content-start"
        >
          <div v-if="introUser">
            <div class="">
              <q-avatar size="140px">
                <q-img
                  :src="myuser.profile ? getImgUser(myuser.profile) : ''"
                  :alt="username"
                  img-class="imgprofile"
                  height="140px"
                  @click="showPic = true"
                />
                <q-badge
                  v-if="tools.isUserOnline(myuser)"
                  align="top"
                  floating
                  color="green"
                  >online</q-badge
                >
              </q-avatar>
            </div>

            <div class="last_access">
              OnLine: <CTimeAgo :datetime="myuser.lasttimeonline" />
            </div>

            <div v-if="myuser.reported">
              <CTitleBanner
                title="⚠️ L'utente è stato Segnalato per comportamento non idoneo."
                bgcolor="bg-red"
                clcolor="text-white"
              >
              </CTitleBanner>
            </div>

            <div
              v-if="site && site.confpages && site.confpages.showNameSurname"
            >
              <div class="text-h6">
                <span v-if="checkifShow('name') && myuser.name">
                  {{ myuser.name }}</span
                >
                <span v-if="checkifShow('surname') && myuser.surname"
                  >&nbsp;{{ myuser.surname }}</span
                >
              </div>
            </div>
            <div class="col-12 text-h7 text-blue text-shadow-2">
              {{ myuser.username }}
            </div>
            <br />

            <CContactUser :myuser="myuser" :showBtnActivities="false" />
          </div>

          <q-tabs
            v-if="isMyRecord(myuser.username)"
            v-model="mytab"
            inline-label
            dense
            class="shadow-2"
          >
            <q-tab name="my" icon="far fa-user" />
            <q-tab
              v-if="isMyRecord(myuser.username)"
              name="favorite"
              icon="favorite"
              content-class="text-red"
            />
            <q-tab
              v-if="isMyRecord(myuser.username)"
              name="bookmark"
              icon="bookmark"
              content-class="text-teal"
            />
          </q-tabs>

          <q-tab-panels
            v-model="mytab"
            animated
            vertical
            keep-alive
            transition-prev="jump-up"
            transition-next="jump-up"
          >
            <q-tab-panel name="my">
              <div v-for="(card, ind) of mycards" :key="ind" :name="card.table">
                <q-card class="q-my-md">
                  <div v-if="card.table === 'mygroups' && tools.isUserOk()">
                    <div class="row text-h6 text-bold">{{t('circuit.conticollettivi')}}:</div>
                    <q-list>
                      <span
                        v-for="(grp, index) in listgroupsfiltered"
                        :key="index"
                        class="q-my-sm q-mx-none"
                        clickable
                      >
                        <CMyGroup
                          :mygrp="grp"
                          :visu="costanti.USER_GROUPS"
                          :noaut="true"
                        >
                        </CMyGroup>
                      </span>
                    </q-list>
                  </div>
                  <div v-else-if="card.table === shared_consts.TABLES_CIRCUITS">
                    <div class="text-h6">{{ card.title }}</div>
                    <q-list>
                      <span
                        v-for="(circuit, index) in listcircuitsfiltered"
                        :key="index"
                        class="q-my-sm q-mx-none"
                        clickable
                      >
                        <CMyCircuit
                          :mycircuit="circuit"
                          :visu="costanti.USER_CIRCUITS"
                          :noaut="true"
                          :username="myuser.username"
                        >
                        </CMyCircuit>
                      </span>
                    </q-list>
                  </div>
                  <div v-else-if="card.table !== 'mygroups' || myuser.email">
                    <CSkill
                      :table="card.table"
                      :filtercustom="
                        card.table === 'mybachecas'
                          ? filtro_eventi
                          : filtroutente
                      "
                      :butt_modif_new="isMyRecord(myuser.username)"
                      :visuinpage="true"
                      :noaut="true"
                      :title="card.title"
                    />
                  </div>
                </q-card>
              </div>
            </q-tab-panel>
            <q-tab-panel v-if="isMyRecord(myuser.username)" name="favorite">
              <div v-for="(card, ind) of mycards" :key="ind" :name="card.table">
                <q-card class="q-my-md">
                  <div v-if="card.showfavorite && filtrofavorite(card.table)">
                    <CSkill
                      :table="card.table"
                      :filtercustom="filtrofavorite(card.table)"
                      :butt_modif_new="false"
                      :visuinpage="true"
                      :noaut="false"
                      :title="card.title"
                    />
                  </div>
                </q-card>
              </div>
            </q-tab-panel>
            <q-tab-panel v-if="isMyRecord(myuser.username)" name="bookmark">
              <div v-for="(card, ind) of mycards" :key="ind" :name="card.table">
                <q-card class="q-my-md">
                  <div v-if="card.showfavorite && filtrobookmark(card.table)">
                    <CSkill
                      :table="card.table"
                      :filtercustom="filtrobookmark(card.table)"
                      :butt_modif_new="false"
                      :visuinpage="true"
                      :noaut="false"
                      :title="card.title"
                    />
                  </div>
                </q-card>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </div>

      <div v-if="!tools.isLogged()">
        <CCheckIfIsLogged></CCheckIfIsLogged>
      </div>

      <q-dialog v-model="showPic" full-height full-width>
        <img :src="getImgUser()" :alt="username" class="full-width" />
      </q-dialog>
    </div>
  </div>
</template>

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