<template>
  <router-link
    :to="to"
    class="sub-navigation-item back-link"
  >
    <chevron-left class="back-link__icon sub-navigation-item__icon" />
    {{ fullTitle }}
  </router-link>
</template>

<script>
  import { MODULE_PAGE } from '@/router/module.names';
  import { ROOMS_PAGE } from '@/router/room.names';
  import { PROJECTS_PAGE } from '@/router/portfolio.names';

  const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');

  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: 'topic',
      },
      slug: {
        type: String,
        default: '',
      },
    },

    components: {
      ChevronLeft,
    },

    computed: {
      to() {
        switch (this.type) {
          case 'topic':
            if (this.slug) {
              return {name: 'topic', params: {topicSlug: this.slug}};
            } else {
              return {};
            }
          case 'module':
            return {name: MODULE_PAGE};
          case 'portfolio':
            return {name: PROJECTS_PAGE};
          default:
            return {name: ROOMS_PAGE};
        }
      },
      fullTitle() {
        switch (this.type) {
          case 'topic':
            return `${this.$flavor.textTopic}: ${this.title}`;
          case 'module':
            return `${this.$flavor.textModule}: ${this.title}`;
          default:
            return this.title;
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .back-link {
    @include regular-text;
  }
</style>
