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

const router = useRouter();

defineProps<{
  show: boolean;
  courseSession: CourseSession | undefined;
  mediaUrl?: string;
  user: UserState | undefined;
}>();

const emit = defineEmits(["closemodal", "logout"]);

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

<template>
  <ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
    <div>
      <div>
        <div v-if="user?.loggedIn" class="-mx-4 border-b px-8 pb-4">
          <div class="-ml-4 flex">
            <div v-if="user?.avatar_url">
              <img
                class="inline-block h-16 w-16 rounded-full"
                :src="user?.avatar_url"
                alt=""
              />
            </div>
            <div class="ml-6">
              <h3>{{ user?.first_name }} {{ user?.last_name }}</h3>
              <button
                class="mt-2 inline-block flex items-center"
                @click="clickLink('/settings')"
              >
                <it-icon-settings class="inline-block" />
                <span class="ml-3">{{ $t("general.settings") }}</span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div v-if="courseSession" class="mt-6 border-b pb-6">
            <h4 class="text-sm text-gray-900">{{ 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>
              <li class="mt-6">
                <button
                  data-cy="medialibrary-link"
                  @click="clickLink(`${courseSession?.media_library_url}`)"
                >
                  {{ $t("mediaLibrary.title") }}
                </button>
              </li>
            </ul>
          </div>
          <div class="mt-6 border-b pb-6">
            <ul>
              <li>
                <a
                  class="nav-item"
                  target="_blank"
                  href="https://bildung.vbv.ch/ilp/pages/catalogsearch.jsf"
                >
                  Shop
                </a>
              </li>
            </ul>
          </div>
          <button
            v-if="user?.loggedIn"
            type="button"
            class="mt-6 flex items-center"
            @click="$emit('logout')"
          >
            <it-icon-logout class="inline-block" />
            <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
          </button>
        </div>
      </div>
    </div>
  </ItFullScreenModal>
</template>
