<template>
  <div>
    <breadcrumbs-nav
      :links="[
        {
          name: RouteName.MODERATION,
          text: $t('Moderation'),
        },
        {
          name: RouteName.REPORT_LOGS,
          text: $t('Moderation log'),
        },
      ]"
    />
    <section v-if="actionLogs.total > 0 && actionLogs.elements.length > 0">
      <ul>
        <li v-for="log in actionLogs.elements" :key="log.id">
          <div class="box">
            <img
              class="image"
              :src="log.actor.avatar.url"
              :alt="log.actor.avatar.alt || ''"
              v-if="log.actor.avatar"
            />
            <i18n-t
              v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
              tag="span"
              keypath="{moderator} closed {report}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #report>
                <router-link
                  :to="{
                    name: RouteName.REPORT,
                    params: { reportId: log.object.id },
                  }"
                  >{{
                    $t("report #{report_number}", {
                      report_number: log.object.id,
                    })
                  }}
                </router-link>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
              tag="span"
              keypath="{moderator} reopened {report}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #report>
                <router-link
                  :to="{
                    name: RouteName.REPORT,
                    params: { reportId: log.object.id },
                  }"
                  >{{
                    $t("report #{report_number}", {
                      report_number: log.object.id,
                    })
                  }}
                </router-link>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
              tag="span"
              keypath="{moderator} marked {report} as resolved"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #report>
                <router-link
                  :to="{
                    name: RouteName.REPORT,
                    params: { reportId: log.object.id },
                  }"
                  >{{
                    $t("report #{report_number}", {
                      report_number: log.object.id,
                    })
                  }}
                </router-link>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="log.action === ActionLogAction.NOTE_CREATION"
              tag="span"
              keypath="{moderator} added a note on {report}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #report>
                <router-link
                  v-if="log.object.report"
                  :to="{
                    name: RouteName.REPORT,
                    params: { reportId: log.object.report.id },
                  }"
                  >{{
                    $t("report #{report_number}", {
                      report_number: log.object.report.id,
                    })
                  }}
                </router-link>
                <span v-else>{{ $t("a non-existent report") }}</span>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="log.action === ActionLogAction.EVENT_DELETION"
              tag="span"
              keypath='{moderator} deleted an event named "{title}"'
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #title>
                <b>{{ log.object.title }}</b>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="
                log.action === ActionLogAction.ACTOR_SUSPENSION &&
                log.object.__typename == 'Person'
              "
              tag="span"
              keypath="{moderator} suspended profile {profile}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #profile>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.object.id },
                  }"
                  >{{ displayNameAndUsername(log.object) }}
                </router-link>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="
                log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
                log.object.__typename == 'Person'
              "
              tag="span"
              keypath="{moderator} has unsuspended profile {profile}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #profile>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.object.id },
                  }"
                  >{{ displayNameAndUsername(log.object) }}
                </router-link>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="
                log.action === ActionLogAction.ACTOR_SUSPENSION &&
                log.object.__typename == 'Group'
              "
              tag="span"
              keypath="{moderator} suspended group {profile}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #profile>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_GROUP_PROFILE,
                    params: { id: log.object.id },
                  }"
                  >{{ displayNameAndUsername(log.object) }}
                </router-link>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="
                log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
                log.object.__typename == 'Group'
              "
              tag="span"
              keypath="{moderator} has unsuspended group {profile}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #profile>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_GROUP_PROFILE,
                    params: { id: log.object.id },
                  }"
                  >{{ displayNameAndUsername(log.object) }}
                </router-link>
              </template>
            </i18n-t>
            <i18n-t
              v-else-if="log.action === ActionLogAction.USER_DELETION"
              tag="span"
              keypath="{moderator} has deleted user {user}"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
              <template #user>
                <router-link
                  v-if="log.object.confirmedAt"
                  :to="{
                    name: RouteName.ADMIN_USER_PROFILE,
                    params: { id: log.object.id },
                  }"
                  >{{ log.object.email }}
                </router-link>
                <b v-else>{{ log.object.email }}</b>
              </template>
            </i18n-t>
            <span
              v-else-if="
                log.action === ActionLogAction.COMMENT_DELETION &&
                log.object.event
              "
            >
              <i18n-t
                tag="span"
                keypath="{moderator} has deleted a comment from {author} under the event {event}"
              >
                <template #moderator>
                  <router-link
                    :to="{
                      name: RouteName.ADMIN_PROFILE,
                      params: { id: log.actor.id },
                    }"
                    >@{{ log.actor.preferredUsername }}</router-link
                  >
                </template>
                <template #event>
                  <router-link
                    v-if="log.object.event && log.object.event.uuid"
                    :to="{
                      name: RouteName.EVENT,
                      params: { uuid: log.object.event.uuid },
                    }"
                    >{{ log.object.event.title }}
                  </router-link>
                  <b v-else>{{ log.object.event.title }}</b>
                </template>
                <template #author>
                  <router-link
                    :to="{
                      name: RouteName.ADMIN_PROFILE,
                      params: { id: log.object.actor.id },
                    }"
                    >{{ displayNameAndUsername(log.object.actor) }}
                  </router-link>
                </template>
              </i18n-t>
              <pre v-html="log.object.text" />
            </span>
            <span v-else-if="log.action === ActionLogAction.COMMENT_DELETION">
              <i18n-t
                tag="span"
                keypath="{moderator} has deleted a comment from {author}"
              >
                <template #moderator>
                  <router-link
                    :to="{
                      name: RouteName.ADMIN_PROFILE,
                      params: { id: log.actor.id },
                    }"
                    >@{{ log.actor.preferredUsername }}</router-link
                  >
                </template>
                <template #author>
                  <router-link
                    :to="{
                      name: RouteName.ADMIN_PROFILE,
                      params: { id: log.object.actor.id },
                    }"
                    >{{ displayNameAndUsername(log.object.actor) }}
                  </router-link>
                </template>
              </i18n-t>
              <pre v-html="log.object.text" />
            </span>
            <i18n-t
              v-else
              tag="span"
              keypath="{moderator} has done an unknown action"
            >
              <template #moderator>
                <router-link
                  :to="{
                    name: RouteName.ADMIN_PROFILE,
                    params: { id: log.actor.id },
                  }"
                  >@{{ log.actor.preferredUsername }}</router-link
                >
              </template>
            </i18n-t>
            <br />
            <small>{{ formatDateTimeString(log.insertedAt) }}</small>
          </div>
        </li>
      </ul>
      <o-pagination
        :total="actionLogs.total"
        v-model="page"
        :per-page="LOGS_PER_PAGE"
        :aria-next-label="$t('Next page')"
        :aria-previous-label="$t('Previous page')"
        :aria-page-label="$t('Page')"
        :aria-current-label="$t('Current page')"
      >
      </o-pagination>
    </section>
    <div v-else>
      <o-notification variant="info">{{
        $t("No moderation logs yet")
      }}</o-notification>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { IActionLog } from "@/types/report.model";
import { LOGS } from "@/graphql/report";
import { ActionLogAction } from "@/types/enums";
import RouteName from "../../router/name";
import { displayNameAndUsername } from "../../types/actor";
import { Paginate } from "@/types/paginate";
import { useQuery } from "@vue/apollo-composable";
import { integerTransformer, useRouteQuery } from "vue-use-route-query";
import { useHead } from "@vueuse/head";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { formatDateTimeString } from "@/filters/datetime";

const LOGS_PER_PAGE = 10;

const page = useRouteQuery("page", 1, integerTransformer);

const { result: actionLogsResult } = useQuery<{
  actionLogs: Paginate<IActionLog>;
}>(LOGS, () => ({
  page: page.value,
  limit: LOGS_PER_PAGE,
}));

const actionLogs = computed(
  () => actionLogsResult.value?.actionLogs ?? { total: 0, elements: [] }
);

const { t } = useI18n({ useScope: "global" });

useHead({
  title: computed(() => t("Moderation logs")),
});
</script>
<style lang="scss" scoped>
img.image {
  display: inline-block;
  height: 1.5em;
  vertical-align: text-bottom;
}

a {
  text-decoration: none;
}

section ul li {
  margin: 0.5rem auto;
}
</style>
