<script setup lang="ts">
import { SUPPORT_LOCALES } from "@/i18nextWrapper";
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
import type { AvailableLanguages } from "@/stores/user";
import { useUserStore } from "@/stores/user";

const props = defineProps<{
  courseName: string;
  imageUrl: string;
}>();

const userStore = useUserStore();

async function changeLocale(language: AvailableLanguages) {
  await userStore.setUserLanguages(language);
}
</script>
<template>
  <div class="flex flex-col items-center justify-between space-y-8 bg-blue-900 p-8">
    <div class="flex w-full items-center justify-between">
      <a href="/" class="flex justify-center">
        <div class="h-8 w-16">
          <it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
        </div>
        <div class="ml-1 border-l border-white pl-3 text-2xl text-white">
          {{ $t("general.title") }}
        </div>
      </a>
      <Menu as="div" class="relative block text-left">
        <div class="text-white">
          <MenuButton class="text-white">
            <it-icon-globe class="relative top-[2px] h-4 w-4" />
            <span class="ml-2 inline">
              {{ $t(`language.${userStore.language}`) }}
            </span>
          </MenuButton>
        </div>

        <transition
          enter-active-class="transition ease-out duration-100"
          enter-from-class="transform opacity-0 scale-95"
          enter-to-class="transform opacity-100 scale-100"
          leave-active-class="transition ease-in duration-75"
          leave-from-class="transform opacity-100 scale-100"
          leave-to-class="transform opacity-0 scale-95"
        >
          <MenuItems
            class="absolute right-0 z-10 mt-2 w-56 origin-top-right bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
          >
            <MenuItem
              v-for="locale in SUPPORT_LOCALES"
              :key="locale"
              v-slot="{ active }"
            >
              <button
                :class="[
                  active ? 'bg-gray-200 text-gray-900' : 'text-gray-800',
                  'block w-full px-4 py-2 text-left',
                ]"
                :data-cy="`language-selector-${locale}`"
                @click="changeLocale(locale)"
              >
                {{ $t(`language.${locale}`) }}
              </button>
            </MenuItem>
          </MenuItems>
        </transition>
      </Menu>
    </div>

    <div class="max-w-xs text-white">
      <img :src="imageUrl" class="aspect-square rounded-full object-cover" alt="" />
      <!-- eslint-disable vue/no-v-html -->
      <h3 class="mt-8 text-center" v-html="props.courseName"></h3>
    </div>

    <div class="flex items-center gap-x-2 text-sm text-white">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-10 w-10 fill-none"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
        />
      </svg>
      <div>
        <!-- TODO: 12.12.2023: FAQ wasn't ready yet. If you see this >4 months from now, just remove it... -->
        <!--        <i18next-->
        <!--          :translation="-->
        <!--            $t('a.Hast du Fragen? Schau dir unsere FAQ an oder kontaktiere uns')-->
        <!--          "-->
        <!--        >-->
        <!--          <template #faq>-->
        <!--            <a class="underline" href="#">FAQ</a>-->
        <!--          </template>-->
        <!--        </i18next>-->
        {{ $t("a.Hast du Fragen? Kontaktiere uns") }}:
        <a class="underline" href="mailto:help@vbv.ch">help@vbv.ch</a>
      </div>
    </div>
  </div>
</template>
