<script setup lang="ts">
import IconLogout from "@/components/icons/IconLogout.vue";
import IconSettings from "@/components/icons/IconSettings.vue";
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useUserStore } from "@/stores/user";
import type { CourseSession } from "@/types";
import { useRouter } from "vue-router";

const router = useRouter();
const userStore = useUserStore();
const courseSessionsStore = useCourseSessionsStore();

const props = defineProps<{
  show: boolean;
  courseSession: CourseSession | undefined;
}>();

const emits = defineEmits(["closemodal"]);

const clickLink = (to: string | undefined) => {
  if (to) {
    router.push(to);
    emits("closemodal");
  }
};
</script>

<template>
  <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
    <div>
      <div>
        <div v-if="userStore.loggedIn" class="border-b -mx-4 px-8 pb-4">
          <div class="-ml-4 flex">
            <div v-if="userStore.avatar_url">
              <img
                class="inline-block h-16 w-16 rounded-full"
                :src="userStore.avatar_url"
                alt=""
              />
            </div>
            <div class="ml-6">
              <h3>{{ userStore.first_name }} {{ userStore.last_name }}</h3>
              <button
                class="mt-2 inline-block flex items-center"
                @click="clickLink('/profile')"
              >
                <IconSettings class="inline-block" />
                <span class="ml-3">{{ $t("mainNavigation.settings") }}</span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div v-if="courseSession" class="mt-6 pb-6 border-b">
            <h4 class="text-gray-900 text-sm">{{ courseSession?.course.title }}</h4>
            <ul class="mt-6">
              <li>
                <button @click="clickLink(courseSession?.learning_path_url)">
                  {{ $t("general.learningPath") }}
                </button>
              </li>
              <li class="mt-6">
                <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
                  {{ $t("cockpit.title") }}
                </button>
              </li>
            </ul>
          </div>
          <div class="mt-6 pb-6 border-b">
            <ul>
              <li>
                <a
                  class="nav-item"
                  target="_blank"
                  href="https://bildung.vbv.ch/ilp/pages/catalogsearch.jsf"
                >
                  Shop
                </a>
              </li>
              <li class="mt-6">
                <button
                  @click="
                    clickLink(
                      courseSessionsStore.courseSessionForRoute?.media_library_url
                    )
                  "
                >
                  {{ $t("mediaLibrary.title") }}
                </button>
              </li>
            </ul>
          </div>
          <button
            v-if="userStore.loggedIn"
            type="button"
            class="mt-6 items-center flex"
            @click="userStore.handleLogout()"
          >
            <IconLogout class="inline-block" />
            <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
          </button>
        </div>
      </div>
    </div>
  </ItFullScreenModal>
</template>
