<script setup lang="ts">
import LearningContentMultiLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue";
import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
import { useRouter } from "vue-router";
import { computed, ref, watch } from "vue";
import {
  type Criterion,
  useSelfEvaluationFeedback,
} from "@/services/selfEvaluationFeedback";
import { useRouteQuery } from "@vueuse/router";
import FeedbackProviderRankCriteria from "@/components/selfEvaluationFeedback/FeedbackProviderRankCriteria.vue";
import FeedbackProviderReleaseOverview from "@/components/selfEvaluationFeedback/FeedbackProviderReleaseOverview.vue";
import log from "loglevel";

const router = useRouter();
const props = defineProps<{
  learningUnitId: string;
  courseSlug: string;
}>();

const currentStepRouteParam = useRouteQuery("step", "0", {
  transform: Number,
  mode: "push",
});

const selfEvaluationFeedback = useSelfEvaluationFeedback(
  props.learningUnitId,
  "provider"
);

const feedback = computed(() => selfEvaluationFeedback?.feedback.value);

watch(
  () => feedback.value,
  () => {
    if (feedback.value && feedback.value.feedback_submitted) {
      log.info("Feedback submitted, redirecting to overview page!");
      router.push({
        name: "mentorSelfEvaluationFeedback",
        params: {
          learningUnitId: props.learningUnitId,
        },
        query: {
          step: feedback.value.criteria.length,
        },
      });
    }
  }
);

const title = computed(() => {
  if (feedback.value) {
    return feedback.value.title;
  }
  return "";
});

const currentStep = ref(currentStepRouteParam);

const stepsCount = computed(() => {
  if (feedback.value) {
    return feedback.value.criteria.length + 1;
  }
  return 0;
});

const currentCriteria = computed(() => {
  if (feedback.value && currentStep.value < stepsCount.value - 1) {
    return feedback.value.criteria[currentStep.value];
  }
  return null;
});

const showNextButton = computed(() => {
  if (feedback.value) {
    return currentStep.value < stepsCount.value - 1;
  }
  return false;
});

const handleBack = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

const handleContinue = () => {
  if (currentStep.value < stepsCount.value) {
    currentStep.value++;
  }
};

const clickExit = () => {
  console.log("clickExit");
  router.push({
    name: "mentorCockpitSelfEvaluationFeedbackAssignments",
    params: {
      learningUnitId: props.learningUnitId,
    },
  });
};

const handleFeedbackEvaluation = async (
  criteria: Criterion,
  evaluation: "SUCCESS" | "FAIL"
) => {
  if (!feedback.value) {
    return;
  }
  await selfEvaluationFeedback.addFeedbackAssessment(
    criteria.course_completion_id,
    evaluation
  );
};

const handleFeedbackRelease = async () => {
  if (!feedback.value) {
    return;
  }
  await selfEvaluationFeedback.releaseFeedback();
};
</script>

<template>
  <LearningContentContainer v-if="feedback" @exit="clickExit">
    <LearningContentMultiLayout
      icon="it-icon-lc-learning-module"
      close-button-variant="close"
      :current-step="currentStep"
      :sub-title="$t('a.Selbsteinschätzung')"
      :title="title"
      :steps-count="stepsCount"
      :show-next-button="showNextButton"
      :show-exit-button="!showNextButton"
      :show-start-button="false"
      :show-previous-button="currentStep > 0 && !feedback.feedback_submitted"
      :end-badge-text="$t('general.submission')"
      @exit="clickExit()"
      @previous="handleBack()"
      @next="handleContinue()"
    >
      <div v-if="feedback" class="h-full">
        <!-- Performance Criteria Evaluation -->
        <FeedbackProviderRankCriteria
          v-if="currentCriteria"
          :requester="feedback.feedback_requester_user"
          :criteria="currentCriteria"
          @evaluation="handleFeedbackEvaluation"
        />
        <!-- Submission -->
        <FeedbackProviderReleaseOverview
          v-else
          :feedback="feedback"
          @release="handleFeedbackRelease"
        />
      </div>
    </LearningContentMultiLayout>
  </LearningContentContainer>
</template>

<style scoped></style>
