import { ref, computed } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js';
import { ONLINE_USERS } from '../../services/data-constants.js';

export default {
  name: 'PlannerUsersOnline',
  setup() {
    const onlineUsers = ref(ONLINE_USERS);
    const visibleOnlineUsers = computed(() => onlineUsers.value.slice(0, 6));
    const remainingOnlineCount = computed(() => onlineUsers.value.length - visibleOnlineUsers.value.length);

    return {
      onlineUsers,
      visibleOnlineUsers,
      remainingOnlineCount,
    };
  },
  template: `
    <div class="row items-center">
      <!-- Desktop View -->
      <div class="row items-center no-wrap gt-sm">
        <q-avatar v-for="user in visibleOnlineUsers" :key="user.id" size="32px" class="planner-users-online-item planner-users-online-img">
          <img :src="user.img">
          <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]" class="bg-white text-grey-9 shadow-10 q-pa-none rounded-borders planner-users-online-tooltip">
            <div class="planner-users-online-profile-card row no-wrap items-center">
              <q-avatar size="54px" class="q-mr-md shadow-1"><img :src="user.img"></q-avatar>
              <div>
                <div class="text-weight-bold text-body2">{{ user.name }}</div>
                <div class="text-caption text-grey-6">{{ user.role }}</div>
                <div class="text-caption text-blue-6 text-weight-medium">Online Now</div>
              </div>
            </div>
          </q-tooltip>
        </q-avatar>
        <div v-if="remainingOnlineCount > 0" class="planner-users-online-item planner-users-online-count-circle cursor-pointer">
          +{{ remainingOnlineCount }}
          <q-menu class="bg-white shadow-15" style="border: 1px solid #e2e8f0">
            <q-list dense style="min-width: 240px"><q-item-label header class="text-weight-bold text-uppercase text-caption text-grey-6">Active Collaborators</q-item-label><q-separator />
              <q-scroll-area style="height: 250px;"><q-item v-for="user in onlineUsers" :key="user.id" clickable v-ripple><q-item-section avatar><q-avatar size="28px"><img :src="user.img"></q-avatar></q-item-section><q-item-section><q-item-label class="text-weight-bold text-caption">{{ user.name }}</q-item-label><q-item-label caption>{{ user.role }}</q-item-label></q-item-section></q-item></q-scroll-area>
            </q-list>
          </q-menu>
        </div>
      </div>
      <!-- Mobile View -->
      <div class="lt-md">
        <q-btn round flat dense color="grey-6" icon="group"><q-badge color="red" floating rounded>{{ onlineUsers.length }}</q-badge>
          <q-menu class="bg-white shadow-15" style="border: 1px solid #e2e8f0"><q-list dense style="min-width: 240px"><q-item-label header class="text-weight-bold text-uppercase text-caption text-grey-6">Online Now</q-item-label><q-separator /><q-scroll-area style="height: 250px;"><q-item v-for="user in onlineUsers" :key="user.id" clickable v-ripple><q-item-section avatar><q-avatar size="28px"><img :src="user.img"></q-avatar></q-item-section><q-item-section><q-item-label class="text-weight-bold text-caption">{{ user.name }}</q-item-label><q-item-label caption>{{ user.role }}</q-item-label></q-item-section></q-item></q-scroll-area></q-list></q-menu>
        </q-btn>
      </div>
    </div>`
};