import { useQuasar } from 'https://cdn.jsdelivr.net/npm/quasar@2.16.0/dist/quasar.umd.prod.js';
import { usePlannerState } from '../../services/planner-state-service.js';

export default {
  name: 'PlannerHeader',
  emits: ['toggle-left-drawer'],
  setup(props, { emit }) {
    const $q = useQuasar();
    const { state, methods } = usePlannerState();

    return {
      state,
      clearHighlights: methods.clearHighlights,
      toggleLeftDrawer: () => emit('toggle-left-drawer'),
      $q,
    };
  },
  template: `
    <q-header class="planner-header-toolbar bg-white text-grey-9">
      <q-toolbar class="q-py-sm">
        <q-btn flat round dense icon="menu" color="grey-7" @click="toggleLeftDrawer"></q-btn>
        <div class="row items-center q-ml-md">
          <div class="bg-blue-grey-1 q-pa-xs rounded-borders q-mr-sm">
            <q-icon name="event_note" color="blue-grey-8" size="24px"></q-icon>
          </div>
          <q-toolbar-title class="text-weight-bold text-subtitle1 text-indigo-10 ellipsis" style="max-width: 150px;">Hotline Planner</q-toolbar-title>
        </div>
        <q-space></q-space>
        <div class="row items-center q-gutter-sm">
          <q-btn v-if="state.highlightedRowId || state.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>
          <planner-users-online />
          <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>
      </q-toolbar>
    </q-header>`
};