<template>
  <div class="breadcrumb-ged">
    <ul class="df-center-y">
      <li class="df-center-y">
        <router-link :to="homepageLink">{{ $_tr('home') }}</router-link>

        <Icon
          icon="arrow-right"
          size="xxs"
          class="breadcrumb-ged__separator mx-xs"
        />
      </li>

      <template v-for="(item, index) in getCurrentBreadcrumb" :key="item.uuid">
        <li class="df-center-y">
          <span
            class="breadcrumb-ged__label"
            @click="index === 0 ? resetGed(item) : goTo(item)"
          >
            {{ item.title }}
          </span>

          <Icon
            icon="arrow-right"
            size="xxs"
            class="breadcrumb-ged__separator mx-xs"
          />
        </li>
      </template>

      <li v-if="getCurrentFolder" class="df-center-y">
        <span
          class="breadcrumb-ged__label breadcrumb-ged__label--last"
          @click="$_closeModal"
        >
          {{ getCurrentFolder.title }}
        </span>
      </li>

      <li v-if="title" class="df-center-y">
        <span class="breadcrumb-ged__label breadcrumb-ged__label--last">
          {{ title }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import GEDNavigationMixin from '../mixins/ged-navigation-mixin'
import CloseModalMixin from '../../../mixins/close-modal'

import { formatHref } from '@inside-library/helpers/Langs'

import { Icon } from 'inside-collection/atoms'

export default {
  name: 'BreadcrumbGed',
  $_i18nRootPath: 'customs.GED.breadcrumb',
  components: { Icon },
  mixins: [GEDNavigationMixin, CloseModalMixin],
  props: {
    title: {
      type: String
    }
  },
  computed: {
    homepageLink() {
      return formatHref({ name: 'HomePage' }, this.$_currentLang)
    },
    getCurrentFolder() {
      return this.$store.getters.getCurrentFolder
    },
    getCurrentBreadcrumb() {
      if (
        this.isAlive(this.getCurrentFolder, [
          'parent_tree',
          this.getCurrentContentType('folders')
        ])
      ) {
        return this.getCurrentFolder.parent_tree[
          this.getCurrentContentType('folders')
        ].reverse()
      }

      return []
    }
  },
  methods: {
    resetGed(item) {
      this.$router.replace(
        formatHref(
          {
            name: 'GedPageCustom',
            params: {
              folder: item.slug[0]
            }
          },
          this.$_currentLang
        )
      )

      this.setStoreAction('setCurrentHashGed', item.slug[0])
    },
    goTo(item) {
      const params = {
        data: { slug: item.slug[0] }
      }

      this.requestFolder(params)
    }
  }
}
</script>

<style scoped lang="scss">
@use '../../../styles/modules/inside-customs/ged/breadcrumb.scss' as *;
</style>
