<template>
  <div v-if="tools.isUserOk()">
    <div v-if="circuit">
      <q-item :class="`q-my-sm bordo_stondato_circuiti ` + ($q.dark.isActive ? `text-white` : `text-black`)" clickable>
        <q-item-section avatar @click="naviga(tools.getPathByTableAndRec(table, circuit))">
          <q-avatar size="60px">
            <q-img :src="getImgCircuit(circuit)" :alt="circuit.name" img-class="imgprofile" height="60px"/>
          </q-avatar>
          <div :class="`q-ma-xs q-px-xs shadow-2 rounded-borders `"><span :class="`q-ma-sm `+ ($q.dark.isActive ? `text-white` : `text-black`)">{{ circuit.numMembers }}</span>
            <q-icon name="fas fa-users" size="xs" color="blue"></q-icon>
          </div>
        </q-item-section>

        <q-item-section :class="$q.dark.isActive ? `text-white` : `text-black`">
          <q-item-label @click="naviga(tools.getPathByTableAndRec(table, circuit))"><strong>{{ circuit.name }}</strong> <span
            v-if="circuit.subname"> ({{ circuit.subname }})</span>
          </q-item-label>
          <q-item-label @click="naviga(tools.getPathByTableAndRec(table, circuit))" v-if="circuit.longdescr" caption lines="3"><em>{{ circuit.longdescr }}</em>
          </q-item-label>
          <q-item-label caption lines="3">
            <q-chip
              v-if="circuit.status !== undefined && circuit.status !== 0" :color="circuitStore.getColorCircuitClass(circuit)"
              text-color="white"
              size="sm"
              :icon="globalStore.getValueByTableSingle('statuscircuit', circuit.status, 'icon')">{{
                globalStore.getValueByTableSingle('statuscircuit', circuit.status)
              }}
              <q-btn
                class="q-ml-sm"
                icon="fas fa-info" color="primary" text-color="white"
                size="xs"
                round
                @click="showingtooltip = !showingtooltip">
                <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{globalStore.getValueByTableSingle('statuscircuit', circuit.status, 'hint')}}</q-tooltip>
              </q-btn>
            </q-chip>

          </q-item-label>
          <q-item-label v-if="(!circuit.transactionsEnabled) && (circuit.status === shared_consts.CIRCUIT_STATUS.FASE3_MONETA_ABILITATA)" caption lines="1">
            <q-icon v-if="!circuit.transactionsEnabled" name="fas fa-lock">
            </q-icon>
            <span class="text-red text-weight-bold">{{ $t('circuit.transaction_suspended') }}</span>
          </q-item-label>

          <q-item-label @click="naviga(tools.getPathByTableAndRec(table, circuit))" lines="1">
            <CSaldo
              :account="account"
              :symbol="circuit.symbol"
              :color="circuit.color"
              :saldo="saldo"
              :qtarem="qtarem"
            >
            </CSaldo>
          </q-item-label>
        </q-item-section>

        <q-item-section side v-if="visu === costanti.USER_CIRCUITS">
          <q-item-label>
            <q-btn rounded :icon="userStore.IsMyCircuitByName(circuit.name) ? `fas fa-ellipsis-h` : `fas fa-user`">
              <q-menu>
                <q-list
                  v-if="(!userStore.IsMyCircuitByName(circuit.name) && !userStore.IsAskedCircuitByName(circuit.name) && !userStore.IsRefusedCircuitByName(circuit.name))"
                  style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.CIRCUITCMD.REQ, myusername(), true, circuitname)">
                    <q-item-section>{{ $t('circuit.ask') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list
                  v-else-if="(!userStore.IsMyCircuitByName(circuit.name) && userStore.IsAskedCircuitByName(circuit.name) && !userStore.IsRefusedCircuitByName(circuit.name))"
                  style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.CIRCUITCMD.REQ, myusername(), false, circuit.name)">
                    <q-item-section>{{ $t('shared.refuse_ask') }}</q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.CIRCUITCMD.REQ, myusername(), false, circuit.name)">
                    <q-item-section>{{ $t('shared.cancel_ask') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list v-else-if="userStore.IsMyCircuitByName(circuit.name)" style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.CIRCUITCMD.REMOVE_FROM_MYLIST, myusername(), '', circuit.name)">
                    <q-item-section>{{ $t('circuit.exit') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list v-if="tools.iAmAdminCircuit(circuit.name)" style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.CIRCUITCMD.DELETE, myusername(), '', circuit.name)">
                    <q-item-section>{{ $t('circuit.delete') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
        <q-item-section side v-if="visu === costanti.REQ_CIRCUIT">
          <q-item-label>
            <q-btn rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list style="min-width: 150px">
                  <q-item clickable icon="fas fa-user-minus" v-close-popup
                          @click="tools.setCmd($q, shared_consts.CIRCUITCMD.REFUSE_REQ, myusername(), false, circuit.name)">
                    <q-item-section>{{ $t('circuit.reject_ask') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
        <q-item-section side v-if="visu === costanti.ASK_SENT_CIRCUIT">
          <q-item-label>
            <q-btn rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list style="min-width: 150px">
                  <q-item clickable icon="fas fa-user-minus" v-close-popup
                          @click="tools.setCmd($q, shared_consts.CIRCUITCMD.REFUSE_REQ, myusername(), '', circuit.name)">
                    <q-item-section>{{ $t('shared.refuse_ask') }}</q-item-section>
                  </q-item>
                  <q-item clickable icon="fas fa-user-minus" v-close-popup
                          @click="tools.setCmd($q, shared_consts.CIRCUITCMD.CANCEL_REQ, myusername(), '', circuit.name)">
                    <q-item-section>{{ $t('shared.cancel_ask') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
      </q-item>
    </div>
  </div>
  <div v-else>
    <CUserNonVerif></CUserNonVerif>
  </div>
</template>

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

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