<template>
  <Chips v-if="false" v-model="viewMode" :items="['open', 'archived']" />
  <ReportInfo
    v-for="report in reports.filter(
      (x) =>
        (moderation || x.reporterUser.id === auth.user.id) &&
        (viewMode === 'open' ? x.open : !x.open)
    )"
    :key="report.id"
    :report="report"
    :thread="report.thread"
    :moderation="moderation"
    raised
    :auth="auth"
    class="universal-card recessed"
  />
  <p v-if="reports.length === 0">You don't have any active reports.</p>
</template>
<script setup>
import Chips from '~/components/ui/Chips.vue'
import ReportInfo from '~/components/ui/report/ReportInfo.vue'
import { addReportMessage } from '~/helpers/threads.js'

defineProps({
  moderation: {
    type: Boolean,
    default: false,
  },
  auth: {
    type: Object,
    required: true,
  },
})

const viewMode = ref('open')
const reports = ref([])

let { data: rawReports } = await useAsyncData('report', () => useBaseFetch('report'))

rawReports = rawReports.value.map((report) => {
  report.item_id = report.item_id.replace(/"/g, '')
  return report
})

const reporterUsers = rawReports.map((report) => report.reporter)
const reportedUsers = rawReports
  .filter((report) => report.item_type === 'user')
  .map((report) => report.item_id)
const versionReports = rawReports.filter((report) => report.item_type === 'version')
const versionIds = [...new Set(versionReports.map((report) => report.item_id))]
const userIds = [...new Set(reporterUsers.concat(reportedUsers))]
const threadIds = [
  ...new Set(rawReports.filter((report) => report.thread_id).map((report) => report.thread_id)),
]

const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
  await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
    useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`)
  ),
  await useAsyncData(`versions?ids=${JSON.stringify(versionIds)}`, () =>
    useBaseFetch(`versions?ids=${encodeURIComponent(JSON.stringify(versionIds))}`)
  ),
  await useAsyncData(`threads?ids=${JSON.stringify(threadIds)}`, () =>
    useBaseFetch(`threads?ids=${encodeURIComponent(JSON.stringify(threadIds))}`)
  ),
])

const reportedProjects = rawReports
  .filter((report) => report.item_type === 'project')
  .map((report) => report.item_id)
const versionProjects = versions.value.map((version) => version.project_id)
const projectIds = [...new Set(reportedProjects.concat(versionProjects))]

const { data: projects } = await useAsyncData(`projects?ids=${JSON.stringify(projectIds)}`, () =>
  useBaseFetch(`projects?ids=${encodeURIComponent(JSON.stringify(projectIds))}`)
)

reports.value = rawReports.map((report) => {
  report.reporterUser = users.value.find((user) => user.id === report.reporter)
  if (report.item_type === 'user') {
    report.user = users.value.find((user) => user.id === report.item_id)
  } else if (report.item_type === 'project') {
    report.project = projects.value.find((project) => project.id === report.item_id)
  } else if (report.item_type === 'version') {
    report.version = versions.value.find((version) => version.id === report.item_id)
    report.project = projects.value.find((project) => project.id === report.version.project_id)
  }
  if (report.thread_id) {
    report.thread = addReportMessage(
      threads.value.find((thread) => report.thread_id === thread.id),
      report
    )
  }
  report.open = true
  return report
})
</script>
