<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 ChevronLeft from '@/components/icons/ChevronLeft';
  import {MODULE_PAGE} from '@/router/module.names';
  import {ROOMS_PAGE} from '@/router/room.names';
  import {PROJECTS_PAGE} from '@/router/portfolio.names';

  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':
            return {name: 'topic', params: {topicSlug: this.slug}};
          case 'module':
            return {name: MODULE_PAGE};
          case 'portfolio':
            return {name: PROJECTS_PAGE};
          default:
            return {name: ROOMS_PAGE};
        }
      },
      fullTitle() {
        switch (this.type) {
          case 'topic':
            return `Thema: ${this.title}`;
          case 'module':
            return `Modul: ${this.title}`;
          default:
            return this.title;
        }
      },
    },
  };
</script>

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

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