<template>
  <div class="mt-8 block border p-6">
    <h3 class="text-blue-dark">
      {{ $t("circlePage.documents.title") }}
    </h3>
    <div>
      <div class="mt-4 leading-relaxed">
        <template v-if="!courseSessionsStore.canUploadCircleDocuments">
          {{ $t("circlePage.documents.userDescription") }}
        </template>
        <template v-else>
          {{ $t("circlePage.documents.expertDescription") }}
        </template>
      </div>
    </div>
    <ul
      v-if="courseSessionsStore.circleDocuments.length"
      class="mt-8 border-t border-t-gray-500"
    >
      <template
        v-for="learningSequence of courseSessionsStore.circleDocuments"
        :key="learningSequence.id"
      >
        <DocumentListItem
          v-for="doc of learningSequence.documents"
          :key="doc.url"
          :subtitle="learningSequence.title"
          :can-delete="courseSessionsStore.canUploadCircleDocuments"
          :doc="doc"
          @delete="deleteDocument(doc)"
        />
      </template>
    </ul>
    <div v-if="courseSessionsStore.canUploadCircleDocuments">
      <button class="btn-primary mt-8 text-xl" @click="showUploadModal = true">
        {{ $t("circlePage.documents.action") }}
      </button>
    </div>
  </div>
  <ItModal v-model="showUploadModal">
    <template #title>{{ $t("circlePage.documents.action") }}</template>
    <template #body>
      <DocumentUploadForm
        :learning-sequences="dropdownLearningSequences"
        :show-upload-error-message="showUploadErrorMessage"
        :is-uploading="isUploading"
        @form-submit="uploadDocument"
      />
    </template>
  </ItModal>
  <div
    v-if="courseSessionsStore.canUploadCircleDocuments"
    class="mt-8 flex flex-col gap-y-4 border p-6"
  >
    <h3 class="text-blue-dark">
      {{ $t("circlePage.documents.trainerTitle") }}
    </h3>
    <div class="leading-relaxed">
      {{ $t("circlePage.documents.trainerDescription") }}
    </div>
    <a target="_blank" class="link" :href="$t('circlePage.documents.trainerLinkSrc')">
      {{ $t("circlePage.documents.trainerLinkText") }}
    </a>
  </div>
</template>

<script setup lang="ts">
import ItModal from "@/components/ui/ItModal.vue";
import { uploadCircleDocument } from "@/services/files";
import { useCircleStore } from "@/stores/circle";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { CircleDocument, DocumentUploadData } from "@/types";
import dialog from "@/utils/confirm-dialog";
import log from "loglevel";
import { computed, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import DocumentListItem from "./DocumentListItem.vue";
import DocumentUploadForm from "./DocumentUploadForm.vue";

const courseSessionsStore = useCourseSessionsStore();
const circleStore = useCircleStore();
const showUploadModal = ref(false);
const showUploadErrorMessage = ref(false);
const isUploading = ref(false);
const dropdownLearningSequences = computed(() =>
  circleStore.circle?.learningSequences.map((sequence) => ({
    id: sequence.id,
    name: sequence.title,
  }))
);

// confirm dialog
const { t } = useI18n();
const deleteDocument = async (doc: CircleDocument) => {
  const options = {
    title: t("circlePage.documents.deleteModalTitle"),
    content: t("circlePage.documents.deleteModalWarning", { title: doc.name }),
  };
  try {
    await dialog.confirm(options);
    courseSessionsStore.removeDocument(doc.id);
  } catch (e) {
    log.debug("rejected");
  }
};
watch(showUploadModal, () => (showUploadErrorMessage.value = false));
async function uploadDocument(data: DocumentUploadData) {
  isUploading.value = true;
  showUploadErrorMessage.value = false;
  try {
    if (!courseSessionsStore.currentCourseSession) {
      throw new Error("No course session found");
    }
    const newDocument = await uploadCircleDocument(
      data,
      courseSessionsStore.currentCourseSession.id
    );
    courseSessionsStore.addDocument(newDocument);
    showUploadModal.value = false;
    isUploading.value = false;
  } catch (error) {
    log.error(error);
    showUploadErrorMessage.value = true;
    isUploading.value = false;
  }
}
</script>
