<template>
  <div class="container mx-auto section">
    <o-notification v-if="loading">
      {{ t("Redirecting to content…") }}
    </o-notification>
    <o-notification v-if="!isURI" variant="danger">
      {{ t("Resource provided is not an URL") }}
    </o-notification>
    <o-notification
      :title="t('Error')"
      variant="danger"
      has-icon
      :closable="false"
      v-if="!loading && errors.length > 0"
    >
      <p v-for="error in errors" :key="error">
        <b>{{ error }}</b>
      </p>
      <p>
        {{
          t(
            "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content."
          )
        }}
      </p>
    </o-notification>
  </div>
</template>

<script lang="ts" setup>
import { INTERACT } from "@/graphql/search";
import { IEvent } from "@/types/event.model";
import { IGroup, usernameWithDomain } from "@/types/actor";
import RouteName from "../router/name";
import { GraphQLError } from "graphql";
import { useQuery } from "@vue/apollo-composable";
import { computed, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { useRouteQuery } from "vue-use-route-query";
import { useHead } from "@vueuse/head";

const router = useRouter();
const route = useRoute();
const { t } = useI18n({ useScope: "global" });

const uri = useRouteQuery("uri", "");

const isURI = computed((): boolean => {
  try {
    const url = new URL(uri.value);
    return !(url instanceof URL);
  } catch (e) {
    return true;
  }
});

const errors = reactive<string[]>([]);

const { onResult, onError, loading } = useQuery<{
  interact: (IEvent | IGroup) & { __typename: string };
}>(
  INTERACT,
  () => ({
    uri: uri.value,
  }),
  () => ({
    enabled: isURI.value !== false,
  })
);

onResult(async ({ data: { interact } }) => {
  switch (interact.__typename) {
    case "Group":
      await router.replace({
        name: RouteName.GROUP,
        params: { preferredUsername: usernameWithDomain(interact as IGroup) },
      });
      break;
    case "Event":
      await router.replace({
        name: RouteName.EVENT,
        params: { uuid: (interact as IEvent).uuid },
      });
      break;
    default:
      errors.push(t("This URL is not supported"));
  }
});

onError(({ graphQLErrors, networkError }) => {
  if (networkError) {
    errors.push(networkError.message);
  }
  errors.push(...graphQLErrors.map((error: GraphQLError) => error.message));
});

useHead({
  title: computed(() => t("Interact with a remote content")),
});
</script>
