<template>
  <nav>
    <section class="pages">
      <router-link
        :class="routeClass(route)"
        v-for="route in mainRoutes"
        :key="route"
        :to="{ name: route }"
        >{{ prettyTitle(route) }}</router-link
      >
    </section>
    <section class="icons">
      <router-link
        :class="routeClass(route)"
        v-for="route in iconRoutes"
        :key="route"
        :to="{ name: route }"
        ><b-icon
          :icon="prettyTitle(route)"
          class="route-icon"
          custom-size="mdi-36px"
      /></router-link>
    </section>
  </nav>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/_variables.scss";

.route-icon {
  width: 50px;
}

nav {
  margin-bottom: 1rem;
  display: flex;
  background: linear-gradient(
    to bottom,
    rgba(200, 230, 250, 0.3),
    rgba(100, 180, 255, 0.1)
  );

  .pages {
    flex: 1;
    display: flex;
  }

  .icons {
    flex-grow: 0;
    display: flex;
  }

  .entry {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    max-width: 250px;
    text-align: center;
    color: $grey-lighter;

    border-right: 1px solid rgba(0, 50, 100, 0.5);

    &:hover {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5),
        rgba(100, 100, 100, 0.1)
      );
      cursor: pointer;
      color: $white;
    }

    &.current,
    &.current:hover {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.7),
        rgba(100, 100, 100, 0.1)
      );
      color: $grey-lighter;
      cursor: normal;
    }
  }
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

const mainRoutes = ["lobby", "deck-editor"];
const iconRoutes = ["settings"];

@Component({
  components: {}
})
export default class TopNav extends Vue {
  private mainRoutes!: string[];
  private iconRoutes!: string[];

  private data() {
    return {
      mainRoutes,
      iconRoutes
    };
  }

  private prettyTitle(name: string): string {
    const route = this.$router.resolve({ name });
    if (!route || !route.resolved.meta || !route.resolved.meta.topnav) {
      return name;
    }
    return route.resolved.meta.topnav;
  }

  private routeClass(name: string) {
    return {
      entry: true,
      current: this.$route.name == name
    };
  }
}
</script>
