<script setup lang="ts">
import {
  trans,
  EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING,
  EXPORT_GENERATION_TOO_MANY_RETRIES,
  EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
  EXPORT_GENERATION_EXPORT_READY,
} from "translator";
import { computed, onMounted, ref } from "vue";
import { StoredObject, StoredObjectStatus } from "ChillDocStoreAssets/types";
import { fetchExportGenerationStatus } from "ChillMainAssets/lib/api/export";
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
import WaitingScreen from "../_components/WaitingScreen.vue";
import { ExportGeneration, WaitingScreenState } from "ChillMainAssets/types";

interface AppProps {
  exportGenerationId: string;
  title: string;
  createdDate: string;
}

const props = defineProps<AppProps>();

const exportGeneration = ref<ExportGeneration | null>(null);

const status = computed<StoredObjectStatus>(
  () => exportGeneration.value?.status ?? "pending",
);
const storedObject = computed<null | StoredObject>(() => {
  if (exportGeneration.value === null) {
    return null;
  }

  return exportGeneration.value?.storedObject;
});

const isPending = computed<boolean>(() => status.value === "pending");
const filename = computed<string>(() => `${props.title}-${props.createdDate}`);

const state = computed<WaitingScreenState>((): WaitingScreenState => {
  if (status.value === "empty") {
    return "pending";
  }

  return status.value;
});

/**
 * counter for the number of times that we check for a new status
 */
let tryiesForReady = ref<number>(0);

/**
 * how many times we may check for a new status, once loaded
 */
const maxTryiesForReady = 120;

const checkForReady = function (): void {
  if (
    "ready" === status.value ||
    "empty" === status.value ||
    "failure" === status.value ||
    // stop reloading if the page stays opened for a long time
    tryiesForReady.value > maxTryiesForReady
  ) {
    return;
  }

  tryiesForReady.value = tryiesForReady.value + 1;
  setTimeout(onObjectNewStatusCallback, 5000);
};

const onObjectNewStatusCallback = async function (): Promise<void> {
  exportGeneration.value = await fetchExportGenerationStatus(
    props.exportGenerationId,
  );

  if (isPending.value) {
    checkForReady();
    return Promise.resolve();
  }

  return Promise.resolve();
};

onMounted(() => {
  onObjectNewStatusCallback();
});
</script>

<template>
  <WaitingScreen :state="state">
    <template v-slot:pending>
      <p>
        {{ trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING) }}
      </p>
    </template>

    <template v-slot:stopped>
      <p>
        {{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}
      </p>
    </template>

    <template v-slot:failure>
      <p>
        {{ trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT) }}
      </p>
    </template>

    <template v-slot:ready>
      <p>
        {{ trans(EXPORT_GENERATION_EXPORT_READY) }}
      </p>

      <p v-if="storedObject !== null">
        <document-action-buttons-group
          :stored-object="storedObject"
          :filename="filename"
        ></document-action-buttons-group>
      </p>
    </template>
  </WaitingScreen>
</template>
