<template>
  <widget-bar>
    <widget-bar-btn
      v-for="btn in buttons"
      :key="btn.icon"
      :to="btn.to"
      :icon="btn.icon"
      :is-active="btn.isActive"
    />
    <widget-bar-separator />
    <widget-bar-btn
      :to="{ name: routeNames.createTask }"
      icon="la la-plus-circle"
      :is-active="$route.name === routeNames.createTask"
    />
    <widget-bar-btn
      icon="la la-search"
      :to="{ name: routeNames.search, params: { search: '' } }"
      :is-active="$route.name === routeNames.search"
    />
    <widget-bar-btn
      v-if="orderName"
      :to="orderTasksPage"
      :is-active="$route.name === routeNames.orderTasks"
      icon="la la-link"
    />
  </widget-bar>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { RouteNames } from '@/widgets/tasks/router/routeNames'
import { RawLocation } from 'vue-router'
import WidgetBarBtn from '@/widgets/base/components/widget-bar/WidgetBarBtn.vue'
import WidgetBar from '@/widgets/base/components/widget-bar/WidgetBar.vue'
import WidgetBarSeparator from '@/widgets/base/components/widget-bar/WidgetBarSeparator.vue'

@Component({
  components: { WidgetBarSeparator, WidgetBarBtn, WidgetBar },
})
export default class TasksBar extends Vue {
  @Prop(String)
  orderName?: string

  get buttons(): { to: RawLocation; icon: string; isActive: boolean }[] {
    return [
      {
        to: { name: RouteNames.tasks },
        icon: 'la la-inbox',
        isActive: this.$route.name === RouteNames.tasks,
      },
      {
        to: { name: RouteNames.categories },
        icon: 'la la-list-alt',
        isActive: this.$route.name === RouteNames.categories,
      },
      {
        to: {
          name: RouteNames.ownTasks,
        },
        icon: 'la la-user-check',
        isActive: this.$route.name === RouteNames.ownTasks,
      },
      {
        to: {
          name: RouteNames.finishedTasks,
        },
        icon: 'la la-flag-checkered',
        isActive: this.$route.name === RouteNames.finishedTasks,
      },
    ]
  }

  get orderTasksPage() {
    return {
      name: RouteNames.orderTasks,
      params: { orderName: this.orderName },
    }
  }

  get routeNames() {
    return RouteNames
  }
}
</script>
