<template>
  <router-link :to="to" data-cy="back-link" 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':
          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 `${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>
