<template>
  <div class="activity-item">
    <o-icon :icon="'chat'" :type="iconColor" />
    <div class="subject">
      <i18n-t :path="translation" tag="p">
        <template #discussion v-if="activity.object">
          <router-link
            :to="{
              name: RouteName.DISCUSSION,
              params: { slug: subjectParams.discussion_slug },
            }"
            >{{ subjectParams.discussion_title }}</router-link
          >
        </template>
        <template v-else #discussion>
          <b>{{ subjectParams.discussion_title }}</b>
        </template>
        <template
          v-if="activity.object && subjectParams.old_discussion_title"
          #old_discussion
        >
          <router-link
            :to="{
              name: RouteName.DISCUSSION,
              params: { slug: subjectParams.discussion_slug },
            }"
            >{{ subjectParams.old_discussion_title }}</router-link
          >
        </template>
        <template
          #old_discussion
          v-else-if="subjectParams.old_discussion_title"
        >
          <b>{{ subjectParams.old_discussion_title }}</b>
        </template>
        <template #profile>
          <popover-actor-card :actor="activity.author" :inline="true">
            <b>
              {{
                $t("@{username}", {
                  username: usernameWithDomain(activity.author),
                })
              }}</b
            ></popover-actor-card
          >
        </template></i18n-t
      >
      <small class="has-text-grey-dark activity-date">{{
        activity.insertedAt | formatTimeString
      }}</small>
    </div>
  </div>
</template>
<script lang="ts">
import { usernameWithDomain } from "@/types/actor";
import { ActivityDiscussionSubject } from "@/types/enums";
import { Options } from "vue-property-decorator";
import RouteName from "../../router/name";
import PopoverActorCard from "../Account/PopoverActorCard.vue";
import ActivityMixin from "../../mixins/activity";
import { mixins } from "vue-class-component";

@Options({
  components: {
    PopoverActorCard,
  },
})
export default class DiscussionActivityItem extends mixins(ActivityMixin) {
  usernameWithDomain = usernameWithDomain;
  RouteName = RouteName;
  ActivityDiscussionSubject = ActivityDiscussionSubject;

  get translation(): string | undefined {
    switch (this.activity.subject) {
      case ActivityDiscussionSubject.DISCUSSION_CREATED:
        if (this.isAuthorCurrentActor) {
          return "You created the discussion {discussion}.";
        }
        return "{profile} created the discussion {discussion}.";
      case ActivityDiscussionSubject.DISCUSSION_REPLIED:
        if (this.isAuthorCurrentActor) {
          return "You replied to the discussion {discussion}.";
        }
        return "{profile} replied to the discussion {discussion}.";
      case ActivityDiscussionSubject.DISCUSSION_RENAMED:
        if (this.isAuthorCurrentActor) {
          return "You renamed the discussion from {old_discussion} to {discussion}.";
        }
        return "{profile} renamed the discussion from {old_discussion} to {discussion}.";
      case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
        if (this.isAuthorCurrentActor) {
          return "You archived the discussion {discussion}.";
        }
        return "{profile} archived the discussion {discussion}.";
      case ActivityDiscussionSubject.DISCUSSION_DELETED:
        if (this.isAuthorCurrentActor) {
          return "You deleted the discussion {discussion}.";
        }
        return "{profile} deleted the discussion {discussion}.";
      default:
        return undefined;
    }
  }

  get iconColor(): string | undefined {
    switch (this.activity.subject) {
      case ActivityDiscussionSubject.DISCUSSION_CREATED:
      case ActivityDiscussionSubject.DISCUSSION_REPLIED:
        return "is-success";
      case ActivityDiscussionSubject.DISCUSSION_RENAMED:
      case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
        return "is-grey";
      case ActivityDiscussionSubject.DISCUSSION_DELETED:
        return "is-danger";
      default:
        return undefined;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./activity.scss";
</style>
