<script setup lang="ts">
import type { LearningUnit, LearningUnitPerformanceCriteria } from "@/types";
import { useLearningMentors } from "@/composables";
import { computed, ref } from "vue";
import ItButton from "@/components/ui/ItButton.vue";
import NoMentorInformationPanel from "@/components/mentor/NoMentorInformationPanel.vue";
import { useSelfEvaluationFeedback } from "@/services/selfEvaluationFeedback";
import FeedbackRequestedInformationPanel from "@/components/selfEvaluationFeedback/FeedbackRequestedInformationPanel.vue";
import FeedbackReceived from "@/components/selfEvaluationFeedback/FeedbackReceived.vue";
import FeedbackRequested from "@/components/selfEvaluationFeedback/FeedbackRequested.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";

const props = defineProps<{
  learningUnit: LearningUnit;
  criteria: LearningUnitPerformanceCriteria[];
}>();

const selfEvaluationFeedback = useSelfEvaluationFeedback(
  props.learningUnit.id,
  "requester"
);
const storedFeedback = computed(() => selfEvaluationFeedback.feedback.value);
const isStoredFeedbackLoading = computed(() => selfEvaluationFeedback.loading.value);
const feedbackProvider = computed(() => storedFeedback.value?.feedback_provider_user);

// if no feedback is stored "current session" state management (mentor selection etc.)
const learningMentors = useLearningMentors();
const isMentorsLoading = computed(() => learningMentors.loading.value);

const mentors = computed(() => {
  return learningMentors.learningMentors.value.map((mentor) => ({
    id: mentor.mentor.id,
    name: `${mentor.mentor.first_name} ${mentor.mentor.last_name}`,
  }));
});

const currentSessionRequestedMentor = ref();

const VisualState = {
  LOADING: "LOADING",
  NO_MENTOR: "NO_MENTOR",
  HAS_REQUESTED_FEEDBACK: "HAS_REQUESTED_FEEDBACK",
  HAS_RECEIVED_FEEDBACK: "HAS_RECEIVED_FEEDBACK",
  HAS_NOT_REQUESTED_FEEDBACK: "HAS_NOT_REQUESTED_FEEDBACK",
};

const currentVisualState = computed(() => {
  if (isMentorsLoading.value || isStoredFeedbackLoading.value) {
    return VisualState.LOADING;
  } else if (mentors.value.length == 0) {
    return VisualState.NO_MENTOR;
  } else if (storedFeedback.value && !storedFeedback.value.feedback_submitted) {
    return VisualState.HAS_REQUESTED_FEEDBACK;
  } else if (storedFeedback.value && storedFeedback.value.feedback_submitted) {
    return VisualState.HAS_RECEIVED_FEEDBACK;
  } else {
    return VisualState.HAS_NOT_REQUESTED_FEEDBACK;
  }
});

const onRequestFeedback = async () => {
  await selfEvaluationFeedback.requestFeedback(currentSessionRequestedMentor.value.id);
};
</script>

<template>
  <div v-if="currentVisualState != VisualState.LOADING">
    <div class="mb-10 w-full pt-8">
      <div
        v-if="currentVisualState != VisualState.HAS_RECEIVED_FEEDBACK"
        class="w-full border border-gray-400"
      >
        <div class="m-6 space-y-6">
          <h3 class="heading-3">
            {{ $t("a.Selbsteinschätzung teilen") }}
          </h3>
          <NoMentorInformationPanel
            v-if="currentVisualState == VisualState.NO_MENTOR"
          />
          <FeedbackRequestedInformationPanel
            v-if="currentVisualState == VisualState.HAS_REQUESTED_FEEDBACK"
            :feedback-mentor-name="`${feedbackProvider?.first_name} ${feedbackProvider?.last_name}`"
          />
          <div v-else-if="currentVisualState == VisualState.HAS_NOT_REQUESTED_FEEDBACK">
            <p>
              {{
                $t(
                  "a.Du kannst deine Selbsteinschätzung mit deiner Lernbegleitung teilen, damit sie eine Fremdeinschätzung vornimmt."
                )
              }}
            </p>
            <ItDropdownSelect
              v-model="currentSessionRequestedMentor"
              :placeholder-text="`${$t('a.Lernbegleitung auswählen')}…`"
              class="mt-6 w-80"
              :items="mentors"
            ></ItDropdownSelect>
            <ItButton
              class="mt-6"
              variant="primary"
              size="large"
              :disabled="!currentSessionRequestedMentor"
              @click="onRequestFeedback"
            >
              <p v-if="!currentSessionRequestedMentor">
                {{ $t("a.Selbsteinschätzung teilen") }}
              </p>
              <p v-else>
                {{
                  $t("a.Selbsteinschätzung mit MENTOR_NAME teilen", {
                    MENTOR_NAME: currentSessionRequestedMentor?.name,
                  })
                }}
              </p>
            </ItButton>
          </div>
        </div>
      </div>
    </div>
    <FeedbackReceived
      v-if="currentVisualState == VisualState.HAS_RECEIVED_FEEDBACK && storedFeedback"
      :feedback="storedFeedback"
    />
    <FeedbackRequested
      v-else
      :criteria="props.criteria"
      :learning-unit="props.learningUnit"
      :show-edit-link="currentVisualState != VisualState.HAS_REQUESTED_FEEDBACK"
    />
  </div>
</template>

<style scoped></style>
