<template>
  <div class="ui three stackable cards">

    <!-- EVENTS -->
    <div class="red card">
      <div class="content">
        <div class="center aligned header">
          Mes dernières notifications reçues
        </div>
        <div class="center aligned description">
          <div class="ui relaxed list">
            <div
              v-for="item in events"
              :key="item.id"
              class="item"
            >
              <div class="content ellipsis nowrap">
                <span v-if="item.event_type === 'create'">
                  <a
                    v-if="item.object_type === 'feature'"
                    :href="modifyUrl(item.related_feature.feature_url)"
                  >
                    Signalement créé
                  </a>
                  <a
                    v-else-if="item.object_type === 'comment'"
                    :href="modifyUrl(item.related_feature.feature_url)"
                  >
                    Commentaire créé
                  </a>
                  <a
                    v-else-if="item.object_type === 'attachment'"
                    :href="modifyUrl(item.related_feature.feature_url)"
                  >
                    Pièce jointe ajoutée
                  </a>
                  <a
                    v-else-if="item.object_type === 'project'"
                    :href="modifyUrl(item.project_url)"
                  >
                    Projet créé
                  </a>
                </span>
                <span v-else-if="item.event_type === 'update'">
                  <a
                    v-if="item.object_type === 'feature'"
                    :href="modifyUrl(item.related_feature.feature_url || item.project_url)"
                  >
                    Signalement mis à jour
                  </a>
                  <a
                    v-else-if="item.object_type === 'project'"
                    :href="modifyUrl(item.project_url)"
                  >à Projet mis à jour
                  </a>
                </span>
                <span v-else-if="item.event_type === 'delete'">
                  <span v-if="item.object_type === 'feature'">
                    Signalement supprimé({{ item.data.feature_title }})
                  </span>
                  <i v-else>Événement inconnu</i>
                </span>
                <span
                  v-if="item.object_type !== 'project'"
                  class="meta"
                >
                  ({{ item.related_feature.title ?
                    item.related_feature.title :
                    'signalement supprimé'
                  }})
                </span>
                <div class="description">
                  <i>[ {{ item.created_on }}
                    <span v-if="user.is_authenticated">
                      , par {{ item.display_user }}
                    </span>
                    ]</i>
                </div>
              </div>
            </div>
            <i
              v-if="!events || events.length === 0"
            >Aucune notification pour le moment.</i>
          </div>
        </div>
      </div>
    </div>

    <!-- FEATURES -->
    <div class="orange card">
      <div class="content">
        <div class="center aligned header">
          Mes derniers signalements
        </div>
        <div class="center aligned description">
          <div class="ui relaxed list">
            <div
              v-for="item in features"
              :key="item.id"
              class="item"
            >
              <div class="content">
                <div>
                  <a
                    v-if="item.related_feature && item.related_feature.feature_url"
                    :href="modifyUrl(item.related_feature.feature_url)"
                  >{{ item.related_feature.title }}</a>
                  <span
                    v-else
                    class="meta"
                  ><del>{{ item.data.feature_title }}</del>&nbsp;(supprimé)</span>
                </div>
                <div class="description">
                  <i>[ {{ item.created_on }}
                    <span v-if="user.is_authenticated">
                      , par {{ item.display_user }}
                    </span>
                    ]</i>
                </div>
              </div>
            </div>
            <i
              v-if="!features || features.length === 0"
            >Aucun signalement pour le moment.</i>
          </div>
        </div>
      </div>
    </div>

    <!-- COMMENTS -->
    <div class="yellow card">
      <div class="content">
        <div class="center aligned header">
          Mes derniers commentaires
        </div>
        <div class="center aligned description">
          <div class="ui relaxed list">
            <div
              v-for="item in comments"
              :key="item.id"
              class="item"
            >
              <div class="content">
                <div>
                  <a
                    :href="modifyUrl(item.related_feature.feature_url)"
                  >"{{ item.related_comment.comment }}"</a>
                </div>
                <div class="description">
                  <i>[ {{ item.created_on }}
                    <span v-if="user.is_authenticated">
                      , par {{ item.display_user }}
                    </span>
                    ]</i>
                </div>
              </div>
            </div>
            <i
              v-if="!comments || comments.length === 0"
            >Aucun commentaire pour le moment.</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

import miscAPI from '@/services/misc-api';

export default {
  
  name: 'UserActivity',

  data() {
    return {
      events: [],
      features: [],
      comments: [],
    };
  },

  computed: {
    ...mapState([
      'user',
    ]),

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

  created(){
    this.getEvents();
  },

  methods: {
    getEvents(){
      miscAPI.getUserEvents(this.$route.params.slug)
        .then((data)=>{
          this.events = data.events;
          this.features = data.features;
          this.comments = data.comments;
        });
    },

    modifyUrl(url) {
      if (url && this.isSharedProject) {
        return url.replace('projet', 'projet-partage');
      }
      return url;
    }
  }

};
</script>