import OnlineUsersStack from '../online-users-stack/online-users-stack.js';
import OnlineUsersMenu from '../online-users-menu/online-users-menu.js';

const { inject } = Vue;
const { useQuasar } = Quasar;

export default {
  name: 'HeaderActions',
  components: { OnlineUsersStack, OnlineUsersMenu },
  setup() {
    const appState = inject('appState');
    const $q = useQuasar();
    return { ...appState, $q };
  },
  template: `
    <div class="header-actions-root row items-center q-gutter-sm">
      <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <q-btn
          v-if="hasHighlights"
          outline
          rounded
          dense
          color="amber-9"
          icon="highlight_off"
          :label="$q.screen.gt.xs ? 'Clear Highlights' : ''"
          class="q-mr-xs bg-amber-1"
          @click="clearHighlights"
        >
          <q-tooltip v-if="!$q.screen.gt.xs">Clear Highlights</q-tooltip>
        </q-btn>
      </transition>

      <online-users-stack class="gt-sm"></online-users-stack>
      <online-users-menu class="lt-md"></online-users-menu>

      <q-separator vertical inset class="gt-xs q-mx-sm"></q-separator>
      <q-btn flat round dense icon="notifications" color="grey-6" class="gt-xs"></q-btn>
      <q-avatar size="32px" class="cursor-pointer q-ml-xs">
        <img src="https://i.pravatar.cc/150?u=me">
      </q-avatar>
    </div>
  `
};