<template>
  <div class="orange card">
    <div class="content">
      <div class="center aligned header">
        Derniers commentaires
      </div>
      <div class="center aligned description">
        <div
          :class="{ active: loading }"
          class="ui inverted dimmer"
        >
          <div class="ui text loader">
            Récupération des commentaires en cours...
          </div>
        </div>
        <div class="ui relaxed list">
          <div
            v-for="(item, index) in last_comments"
            :key="'comment ' + index"
            class="item"
          >
            <div class="content">
              <div>
                <router-link
                  :to="getRouteUrl(item.related_feature.feature_url)"
                >
                  "{{ item.comment }}"
                </router-link>
              </div>
              <div class="description">
                <em>[ {{ item.created_on
                }}<span
                  v-if="user && item.display_author"
                >, par {{ item.display_author }}
                </span>
                  ]</em>
              </div>
            </div>
          </div>
          <em
            v-if="!last_comments || last_comments.length === 0"
          >Aucun commentaire pour le moment.</em>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex';

export default {

  name: 'ProjectsLastComments',

  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    ...mapState([
      'user'
    ]),
    ...mapState('projects', [
      'last_comments',
    ]),
    isSharedProject() {
      return this.$route.path.includes('projet-partage');
    },
  },

  methods: {
    getRouteUrl(url) {
      if (this.isSharedProject) {
        url = url.replace('projet', 'projet-partage');
      }
      return url.replace(this.$store.state.configuration.BASE_URL, ''); //* remove duplicate /geocontrib
    },
  }

};
</script>