<template>
  <q-toolbar class="bg-blue-grey-10 text-white q-pl-none">
    <div class="flex items-center" style="width: 300px">
      <q-btn
        unelevated
        round
        :href="projectsUrl"
        class="ui-projects-menu"
        color="primary"
        icon="la la-ellipsis-v"
        type="a"
      />
      <span class="ui-logo-img">
        <slot name="image" />
      </span>
      <q-toolbar-title @change="goToIndex" class="cursor-pointer">
        {{ title }}
      </q-toolbar-title>
    </div>
    <div class="q-px-sm">
      <div class="flex items-center ui-gap-x-sm">
        <slot name="left" />
        <q-btn
          v-for="link in links"
          :to="link.route"
          :key="link.label"
          :label="link.label"
          :color="isActiveRoute(link.route) ? 'primary' : undefined"
        />
      </div>
    </div>
    <q-space />
    <div class="flex items-center ui-gap-x-sm">
      <slot name="right" />
    </div>
  </q-toolbar>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import ToolbarLink from '../types/ToolbarLink'
import { RawLocation } from 'vue-router'
import { QBtn, QSpace, QToolbar, QToolbarTitle } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QToolbar, QBtn, QToolbarTitle, QSpace },
})
export default class UiToolbar extends Vue {
  @Prop({ type: String, required: true }) title!: string
  @Prop({ type: String }) projectsUrl?: string
  @Prop({ type: Array, default: () => [] }) links!: ToolbarLink[]

  isActiveRoute(route: RawLocation): boolean {
    return this.$route.matched
      .map(match => match.name)
      .includes(typeof route === 'string' ? route : route.name)
  }

  goToIndex() {
    this.$router.push('/')
  }
}
</script>
