<template>
  <div>
    <h4 class="ui horizontal divider header">
      MES PROJETS
    </h4>

    <div class="ui divided items">
      <div
        v-for="project in availableProjects"
        :key="project.slug"
        class="item"
      >
        <div
          v-if="user_permissions[project.slug].can_view_project"
        >
          <div class="ui tiny image">
            <img
              v-if="project.thumbnail"
              class="ui small image"
              :src="
                project.thumbnail.includes('default')
                  ? require('@/assets/img/default.png')
                  : DJANGO_BASE_URL + project.thumbnail + refreshId()
              "
              height="200"
            >
          </div>
          <div class="middle aligned content">
            <router-link
              :to="{
                name: 'project_detail',
                params: { slug: project.slug },
              }"
              class="header"
            >
              {{ project.title }}
            </router-link>
            <div class="description">
              <p>{{ project.description }}</p>
            </div>
            <div class="meta">
              <span
                class="right floated"
              >Projet {{ project.moderation ? "" : "non" }} modéré</span>
              <span>Niveau d'autorisation requis :
                {{ project.access_level_pub_feature }}</span><br>
              <span>
                Mon niveau d'autorisation :
                <span v-if="USER_LEVEL_PROJECTS && project">{{
                  USER_LEVEL_PROJECTS[project.slug]
                }}</span>
                <span v-if="user && user.is_administrator">{{
                  "+ Gestionnaire métier"
                }}</span>
              </span>
            </div>
            <div class="meta">
              <span
                class="right floated"
                :data-tooltip="`Projet créé le ${project.created_on}`"
              >
                <i class="calendar icon" />&nbsp;{{ project.created_on }}
              </span>
              <span data-tooltip="Membres">
                {{ project.nb_contributors }}&nbsp;<i class="user icon" />
              </span>
              <span data-tooltip="Signalements publiés">
                {{ project.nb_published_features }}&nbsp;<i
                  class="map marker icon"
                />
              </span>
              <span data-tooltip="Commentaires">
                {{ project.nb_published_features_comments }}&nbsp;<i
                  class="comment icon"
                />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  
  name: 'UserProjectList',

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS',
      'user_permissions',
    ]),
    // todo : filter projects to user
    ...mapState('projects', [
      'projects'
    ]),

    DJANGO_BASE_URL() {
      return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
    },

    isSharedProject() {
      return this.$route.path.includes('projet-partage');
    },

    availableProjects() {
      if (this.isSharedProject) {
        return this.projects.filter((el) => el.slug === this.$route.params.slug);
      }
      return this.projects;
    }
  },

  methods: {
    refreshId() {
      return '?ver=' + Math.random();
    },
  }

};
</script>