<template>

  <div class="q-gutter-sm q-pa-sm q-pb-md">
    <div v-if="!mygrp && !loading">
      <div v-if="mystatus === 403">
        <h3>Non hai i permessi per accedere al Gruppo.<br>

          Occorre prima registrarsi alla App </h3>
      </div>
      <div v-else>
        <h3>Gruppo non Esistente</h3>
      </div>
    </div>
    <div v-else>

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

        <div v-if="mygrp.descr" class="fit column no-wrap justify-evenly items-center content-start">

          <div class="">
            <q-avatar size="140px">
              <q-img :src="getImgGrp()" :alt="mygrpname()" img-class="imgprofile" height="140px" @click="showPic = true"/>
            </q-avatar>
          </div>

          <div class="text-h6">
            <span v-if="checkifShow('name')"> {{ mygrp.title }}</span>
          </div>
          <div v-if="mygrp.title !== mygrp.groupname" class="col-12 text-h7 text-blue text-shadow-2">
            {{ mygrp.groupname }}
          </div>

          <q-banner
            v-if="userStore.IsRefusedGroupByGroupname(mygrp.groupname)"
            rounded
            class="bg-red text-white"
            style="text-align: center;"
          >
            <em style="font-weight: bold">{{ $t('db.youarerefusedgroup') }}</em><br>
          </q-banner>


          <div>
            <q-btn
              v-if="!userStore.IsMyGroupByGroupname(mygrp.groupname) && !userStore.IsAskedGroupByGroupname(mygrp.groupname) && !userStore.IsRefusedGroupByGroupname(mygrp.groupname)"
              icon="fas fa-user-plus"
              color="primary" :label="$t('groups.ask_group')"
              @click="tools.setRequestGroup($q, userStore.my.username, mygrp.groupname, true)"
            />
            <q-btn
              v-if="userStore.IsMyGroupByGroupname(mygrp.groupname)"
              rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list v-if="true" style="min-width: 150px">
                  <q-item clickable v-close-popup
                          @click="tools.removeFromMyGroups($q, userStore.my.username, mygrp.groupname, $t('db.domanda_exit_fromgroup', {groupname: mygrp.groupname }))">
                    <q-item-section avatar>
                      <q-icon color="negative" name="fas fa-user-minus"/>
                    </q-item-section>
                    <q-item-section>{{ $t('groups.exit_group') }}</q-item-section>
                  </q-item>

                  <q-list v-if="tools.iAmAdminGroup(mygrp.groupname)" style="min-width: 200px">
                    <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.DELETE_GROUP, userStore.my.username, '', mygrp.groupname)">
                      <q-item-section avatar>
                        <q-icon color="negative" name="fas fa-trash-alt"/>
                      </q-item-section>
                      <q-item-section>{{ $t('groups.delete_group') }}</q-item-section>
                    </q-item>
                  </q-list>


                </q-list>
              </q-menu>
            </q-btn>

            <q-btn
              v-if="userStore.IsAskedGroupByGroupname(mygrp.groupname) && !userStore.IsMyGroupByGroupname(mygrp.groupname)"
              icon="fas fa-user-minus"
              flat :label="$t('groups.cancel_ask_group_short')"
              @click="tools.cancelReqGroups($q, userStore.my.username, mygrp.groupname)"
            />
          </div>

        </div>
        <div v-if="mygrp.descr" class="no-wrap justify-evenly items-center content-start">


          <!--
          <q-btn
            v-if="tools.iAmAdminGroup(groupname)" icon="fas fa-pencil-alt"
            color="blue"
            size="md"
            :label="$t('otherpages.modifgrp')"
            to="/editgrp">
          </q-btn>
          -->

          <q-tabs v-model="tabgrp" class="text-blue">
            <q-tab label="Info" name="info" icon="fas fa-info"></q-tab>
            <q-tab v-if="!!mygrp.note" label="Pagina" name="page" icon="fas fa-file-word"></q-tab>
            <q-tab v-if="tools.iCanShowGroupsMember(mygrp) || tools.iAmAdminGroup(groupname)"
                   :label="t('groups.subscribes')" name="membri" icon="fas fa-users"></q-tab>
          </q-tabs>

          <q-tab-panels v-model="tabgrp" animated>
            <q-tab-panel name="info">
              <div>
                <q-card>
                  <q-card-section>
                    <div class="text-h6">{{ t('groups.info') }}</div>
                  </q-card-section>

                  <q-separator/>

                  <q-card-section>
                    <div class="element">
                      <q-icon name="fas fa-lightbulb"></q-icon>
                      {{ $t('groups.createdby', {
                      username: mygrp.createdBy,
                      date: tools.getstrDateYY(mygrp.date_created), })
                      }}
                    </div>
                    <div class="element">
                      <q-icon name="fas fa-pencil-alt"></q-icon>
                      {{ $t('groups.lastmodify', {
                      date: tools.getstrDateYY(mygrp.date_updated), })
                      }}
                    </div>

                    <div v-if="mygrp.visibility.includes(shared_consts.Visibility_Group.PRIVATE)" class="row">
                      <div class="q-pa-xs">
                        <q-icon name="fas fa-lock"></q-icon>
                      </div>
                      <div>
                        <div class="title_param"> {{ $t('groups.private') }}</div>
                        {{ $t('groups.private_descr') }}
                      </div>
                    </div>

                    <div v-if="mygrp.visibility.includes(shared_consts.Visibility_Group.HIDDEN)" class="row">
                      <div class="q-pa-xs">
                        <q-icon name="fas fa-eye-slash"></q-icon>
                      </div>
                      <div>
                        <div class="title_param"> {{ $t('groups.hidden') }}</div>
                        {{ $t('groups.hidden_descr') }}
                      </div>
                    </div>

                    <div v-if="cities.length > 0" class="row">
                      <div class="q-pa-xs">
                        <q-icon name="fas fa-map-marker-alt"></q-icon>
                      </div>
                      <div>
                        <div class="title_param">
                          <div v-for="(city, index) of cities" :key="index">
                            {{ city.comune }} ({{ city.prov }})
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="members">
                      <q-icon name="fas fa-users"></q-icon>
                      {{ numUsers() }} {{ numUsers() === 1 ? t('groups.member') : t('groups.members') }}
                    </div>
                    <div class="admins">
                      <q-icon name="fas fa-user-cog"></q-icon>
                      {{ numAdmins() }} {{ numAdmins() === 1 ? t('groups.admin') : t('groups.admins') }}
                    </div>
                    <div v-for="(user, index) of mygrp.admins" :key="index">
                      <CMyUser
                        :mycontact="user"
                        :visu="costanti.FIND_PEOPLE"
                        @setCmd="tools.setCmd"
                      >
                      </CMyUser>
                    </div>
                  </q-card-section>
                </q-card>

                <br>
              </div>
              <q-card v-if="mygrp.title">
                <q-card-section>
                  <div class="text-h6">Descrizione:</div>
                </q-card-section>
                <q-separator/>

                <q-card-section>
                  <div class="col-12 text-h7">
                    <span v-if="checkifShow('descr')">{{ mygrp.descr }}</span>
                  </div>

                  <div class="col-6 q-ma-xs">

                    <q-btn
                      v-if="getLinkGrpTelegram()" icon="fab fa-telegram"
                      color="blue" type="a"
                      size="md"
                      rounded
                      :label="$t('msgs.telegrammsg')"
                      :href="getLinkGrpTelegram()" target="__blank">
                    </q-btn>

                  </div>
                  <div class="col-6 q-ma-xs">
                    <q-btn
                      v-if="getLinkWebSite()" icon="fas fa-globe"
                      color="blue" type="a"
                      size="md"
                      rounded
                      :label="$t('reg.website')"
                      :href="getLinkWebSite()" target="__blank">
                    </q-btn>
                  </div>

                </q-card-section>
              </q-card>

            </q-tab-panel>

            <q-tab-panel name="page">
              <div v-if="mygrp.note">
                <br>
                <div class="q-ma-sm q-gutter-sm q-pa-xs">
                  <div v-if="mygrp.note" v-html="mygrp.note">
                  </div>
                </div>
              </div>
            </q-tab-panel>

            <q-tab-panel name="membri" style="max-width: 400px;" v-if="tools.iCanShowGroupsMember(mygrp)">

              <q-tabs v-model="tabmembers" class="text-blue">
                <q-tab label="Tutti" name="all" icon="fas fa-users"></q-tab>
                <q-tab v-if="tools.iAmAdminGroup(groupname)" label="Richieste" name="rich" icon="fas fa-user-plus"></q-tab>
                <q-tab v-if="tools.iAmAdminGroup(groupname)" label="Rifiutati" name="refused" icon="fas fa-user-minus"></q-tab>
              </q-tabs>

              <q-tab-panels v-model="tabmembers" animated>
              <q-tab-panel name="all">

              <CGridTableRec
                ref="tabMembri"
                prop_mytable="users"
                prop_mytitle=""
                :prop_mycolumns="colmyUserPeople"
                prop_colkey="_id"
                col_title="username"
                :vertical="costanti.VISUTABLE_LISTA"
                nodataLabel="Nessun Iscritto"
                :prop_search="true"
                hint="Username da trovare"
                :finder="false"
                :choose_visutype="true"
                :finder_noNull="false"
                :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                :butt_modif_new="false"
                noresultLabel="Username non trovato"
                :arrfilters="arrfilterand"
                :filtercustom="filtercustom"
                :prop_searchList="searchList"
                :showType="costanti.SHOW_USERINFO"
                :showCol="false"
                :extrafield="groupname"
                :extraparams="extraparams()"
                :visufind="tools.iAmAdminGroup(groupname) ? costanti.REQ_REMOVE_USER_TO_GROUP : costanti.FIND_PEOPLE"
              >

              </CGridTableRec>
              </q-tab-panel>
              <q-tab-panel name="rich">

                <CGridTableRec
                  prop_mytable="mygroups"
                  prop_mytitle=""
                  :prop_mycolumns="colmyUserPeople"
                  prop_colkey="_id"
                  col_title=""
                  :vertical="costanti.VISUTABLE_USER_TABGROUP"
                  nodataLabel="Nessuna Richiesta in sospeso"
                  :prop_search="false"
                  hint="Username da trovare"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="Username non trovato"
                  :arrfilters="arrfilterand"
                  :filtercustom="filtercustom_rich"
                  :prop_searchList="searchList"
                  :showType="costanti.SHOW_USERINFO"
                  keyMain=""
                  :showCol="false"
                  :extraparams="extraparams_rich()"
                  :extrafield="groupname"
                  :visufind="costanti.REQ_ADD_USER_TO_GROUP"
                >

                </CGridTableRec>
              </q-tab-panel>
              <q-tab-panel name="refused">

                <CGridTableRec
                  prop_mytable="mygroups"
                  prop_mytitle=""
                  :prop_mycolumns="colmyUserPeople"
                  prop_colkey="_id"
                  col_title=""
                  :vertical="costanti.VISUTABLE_USER_TABGROUP"
                  nodataLabel="Nessun utente Rifiutato"
                  :prop_search="false"
                  hint="Username da trovare"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="Username non trovato"
                  :arrfilters="arrfilterand"
                  :filtercustom="filtercustom_rich"
                  :prop_searchList="searchList"
                  :showType="costanti.SHOW_USERINFO"
                  keyMain=""
                  :showCol="false"
                  :extraparams="extraparams_refused()"
                  :extrafield="groupname"
                  :visufind="costanti.REQ_ADD_USER_TO_GROUP"
                >

                </CGridTableRec>
              </q-tab-panel>
              </q-tab-panels>

            </q-tab-panel>
          </q-tab-panels>

        </div>
        <div v-else class="fit column no-wrap justify-evenly items-center content-start">
          <q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
          <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">
              {{ groupname }}
            </div>
            <div class="col-12 text-h7">
              <q-skeleton :animation="animation"/>
            </div>

            <div class="col-12 text-h8 q-mt-sm">
              <q-skeleton :animation="animation"/>
            </div>
            <div class="col-12 text-h8 q-mt-sm">
              <q-skeleton :animation="animation"/>
            </div>
          </q-card>
        </div>

      </div>
      <q-dialog
        v-model="showPic"
        full-height full-width
      >

        <img :src="getImgGrp()" :alt="groupname" class="full-width">

      </q-dialog>
    </div>
  </div>

</template>

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

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

