<template>
  <div>
    <q-btn
      flat
      round
      dense
      icon="fas fa-bell"
      class="q-mx-xs"
      @click="open = !open"
    >
      <q-badge v-if="num_notifs_unread > 0" floating color="red">{{
        num_notifs_unread
      }}</q-badge>
    </q-btn>
    <q-btn v-if="false" flat round dense icon="fas fa-bell">
      <q-badge v-if="num_notifs_unread > 0" floating color="red">{{
        num_notifs_unread
      }}</q-badge>
    </q-btn>

    <q-drawer
      v-model="open"
      side="right"
      elevated
      class="text-black"
      :overlay="true"
      :breakpoint="1200"
      :width="q.screen.lt.sm ? tools.getwidth($q) : 450"
    >
      <q-bar class="bg-primary text-white">
        {{ $t('notifs.notifs') }}
        <q-space />
        <q-btn
          flat
          round
          color="white"
          icon="close"
          @click="open = false"
        ></q-btn>
      </q-bar>

      <q-bar v-if="tools.isLogged()"
        >
        <div>
          <q-btn-toggle
            v-model="show_all"
            class="my-custom-toggle"
            no-caps
            rounded
            dense
            unelevated
            toggle-color="primary"
            color="white"
            text-color="primary"
            :options="[
              { label: t('notifs.all'), value: true },
              { label: t('notifs.notread'), value: false },
            ]"
          />
        </div>
        <q-space />
        <div >
          <q-btn round dense icon="fas fa-ellipsis-h" class="q-mx-xs">
            <q-menu style="min-width: 200px">
              <q-list style="">
                <q-item clickable v-close-popup to="/notifs">
                  <q-item-section side>
                    <q-icon name="fas fa-cog" />
                  </q-item-section>
                  <q-item-section>{{ $t('notifs.settings') }}</q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="
                    notifStore.setAllRead(
                      username,
                      shared_consts.QualiNotifs.OTHERS
                    )
                  "
                >
                  <q-item-section side>
                    <q-icon name="fas fa-check" />
                  </q-item-section>
                  <q-item-section>{{ $t('notifs.setallread') }}</q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-close-popup
                  @click="
                    notifStore.deleteAll(
                      username,
                      shared_consts.QualiNotifs.OTHERS
                    )
                  "
                >
                  <q-item-section side>
                    <q-icon name="fas fa-trash-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('notifs.deleteall') }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </q-bar>

      <div class="clBorderSperator"></div>

      <div class="q-ma-xs">
        <q-list bordered class="rounded-borders">
          <div v-if="num_notifs_unread === 0">
            <q-item>
              <q-item-label lines="1">{{ $t('notifs.nonotif') }}</q-item-label>
            </q-item>
          </div>

          <q-item clickable v-for="(notif, index) in lasts_notifs" :key="index">
            <!--<q-item-section avatar>
              <q-avatar>
                <q-item-label lines="1">{{ getTypeDirNotif(notif) }}</q-item-label>
              </q-avatar>
            </q-item-section>-->

            <q-item-section avatar>
              <q-avatar @click="clickNotif(notif)">
                <img :src="notif.myimgsender" :alt="notif.sender" />
              </q-avatar>
            </q-item-section>

            <q-item-section v-ripple>
              <q-item-label
                lines="5"
                :class="!notif.read ? 'unread' : 'read'"
                @click="clickNotif(notif)"
              >
                <div v-html="getNotifText($t, notif, false)"></div>
              </q-item-label>
              <q-item-label
                caption
                lines="2"
                v-if="
                  notif.typedir === shared_consts.TypeNotifs.TYPEDIR_FRIENDS &&
                  notif.status === 0
                "
                v-ripple
              >
                <div
                  class="row no-wrap justify-evenly"
                  v-if="userStore.IsReqFriendByUsername(notif.sender)"
                >
                  <q-btn
                    dense
                    rounded
                    size="sm"
                    icon="fas fa-user-plus"
                    color="positive"
                    :label="$t('friends.accept')"
                    @click="
                      tools.addToMyFriends(
                        q,
                        userStore.my.username,
                        notif.sender
                      )
                    "
                  />
                  <q-btn
                    dense
                    rounded
                    size="sm"
                    icon="fas fa-user-minus"
                    color="negative"
                    :label="$t('friends.refuse')"
                    @click="
                      tools.refuseReqFriends(
                        q,
                        userStore.my.username,
                        notif.sender
                      )
                    "
                  />
                </div>
              </q-item-label>
              <!--<q-item-label caption lines="2" v-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_HANDSHAKE && notif.status === 0" v-ripple>
                <div class="row no-wrap justify-evenly" v-if="!userStore.IsHandShakeByUsername(notif.sender)">
                  <q-btn
                    dense
                    rounded
                    size="sm"
                    icon="fas fa-user-plus"
                    color="positive" :label="$t('handshake.accept')"
                    @click="tools.addToMyHandShake(q, userStore.my.username, notif.sender)"
                  />
                </div>
              </q-item-label>-->
              <q-item-label
                caption
                lines="2"
                v-else-if="
                  notif.typedir === shared_consts.TypeNotifs.TYPEDIR_GROUPS &&
                  notif.status === 0 &&
                  notif.typeid ===
                    shared_consts.TypeNotifs.ID_GROUP_REQUEST_TO_ENTER
                "
                v-ripple
              >
                <div
                  class="row no-wrap justify-evenly"
                  v-if="tools.iAmAdminGroup(notif.extrafield)"
                >
                  <q-btn
                    dense
                    rounded
                    size="sm"
                    icon="fas fa-user-plus"
                    color="positive"
                    :label="$t('friends.accept')"
                    @click="
                      tools.addToMyGroups(q, notif.sender, notif.extrafield)
                    "
                  />
                  <q-btn
                    dense
                    rounded
                    size="sm"
                    icon="fas fa-user-minus"
                    color="negative"
                    :label="$t('friends.refuse')"
                    @click="
                      tools.refuseReqGroup(q, notif.sender, notif.extrafield)
                    "
                  />
                </div>
              </q-item-label>

              <q-item-label
                caption
                lines="1"
                :class="!notif.read ? 'unread-date' : 'read-date'"
                @click="clickNotif(notif)"
              >
                <CTimeAgo :datetime="notif.datenotif" />
                <!--{{ // getUsernameChatByNotif(notif) }}-->
              </q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-item-label>
                <q-btn dense rounded icon="fas fa-ellipsis-h">
                  <q-menu>
                    <q-list style="min-width: 150px">
                      <q-item
                        clickable
                        v-close-popup
                        @click="notifStore.setRead(notif._id, false)"
                      >
                        <q-item-section side>
                          <q-icon name="fas fa-trash-alt" />
                        </q-item-section>
                        <q-item-section>{{ $t('notifs.read') }}</q-item-section>
                      </q-item>
                      <q-item
                        clickable
                        v-close-popup
                        @click="notifStore.deleteRec(username, notif._id, false)"
                      >
                        <q-item-section side>
                          <q-icon name="fas fa-trash-alt" />
                        </q-item-section>
                        <q-item-section>{{
                          $t('notifs.delete_notif')
                        }}</q-item-section>
                      </q-item>
                      <q-item
                        clickable
                        v-close-popup
                        @click="notifStore.deactivateRec(notif._id)"
                      >
                        <q-item-section side>
                          <q-icon name="fas fa-bell-slash" />
                        </q-item-section>
                        <q-item-section>{{
                          $t('notifs.deactivate_notif')
                        }}</q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-btn>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-separator />
        </q-list>
      </div>
    </q-drawer>
  </div>
</template>

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