/**
 * app-header.js
 * ==============
 * Top toolbar: logo, online-users component, notifications,
 * clear-highlights button.
 */

import {
  leftDrawer,
  highlightedRowId,
  highlightedDateStr,
  clearHighlights
} from '../../services/planner-state.js';

import OnlineUsers from '../online-users/online-users.js';

export default {
  name: 'AppHeader',
  components: { OnlineUsers },
  setup() {
    return {
      leftDrawer,
      highlightedRowId,
      highlightedDateStr,
      clearHighlights
    };
  },
  template: `
    <q-header class="bg-white text-grey-9 border-b" style="border-bottom: 1px solid #e2e8f0">
      <q-toolbar class="q-py-sm">
        <q-btn flat round dense icon="menu" color="grey-7" @click="leftDrawer = !leftDrawer"></q-btn>
        <div class="row items-center q-ml-md">
          <q-toolbar-title class="text-weight-bold text-subtitle1 text-grey-9 ellipsis" style="max-width: 200px;">Hotline Planner</q-toolbar-title>
        </div>
        <q-space></q-space>

        <div class="row items-center q-gutter-sm">
          <!-- Clear highlights button -->
          <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <q-btn v-if="highlightedRowId || highlightedDateStr"
                   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 (reactive, WSS-driven) -->
          <online-users></online-users>

          <q-btn flat dense icon="notifications" color="grey-6" class="gt-xs q-ml-sm" label="Alerts"></q-btn>
        </div>
      </q-toolbar>
    </q-header>
  `
};