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

log.debug("AppFooter created");

const userStore = useUserStore();
const hideVersion = (import.meta.env.VITE_APP_ENVIRONMENT || "local").startsWith(
  "prod"
);

async function changeLocale(language: AvailableLanguages) {
  userStore.setUserLanguages(language);
}
</script>

<template>
  <footer class="flex flex-col border-t bg-gray-200 px-8 py-4 lg:flex-row">
    <div>{{ $t("footer.copyright") }}</div>
    <div class="lg:ml-8">
      <a :href="$t('footer.dataProtectionLink')" target="_blank">
        {{ $t("footer.dataProtectionText") }}
      </a>
    </div>
    <div class="lg:ml-8">
      <a :href="$t('footer.imprintLink')" target="_blank">
        {{ $t("footer.imprintText") }}
      </a>
    </div>
    <div class="flex-grow"></div>
    <div :class="{ hidden: hideVersion }">VBV_VERSION_BUILD_NUMBER_VBV</div>
    <Menu>
      <MenuButton class="lg:ml-8" data-cy="language-switch-button">
        <it-icon-globe class="relative top-[2px] h-4 w-4" />
        <span class="ml-2 inline">{{ $t(`language.${userStore.language}`) }}</span>
      </MenuButton>
      <div class="relative">
        <MenuItems
          class="lg:right- absolute -right-2/3 -top-24 w-40 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
        >
          <MenuItem v-for="locale in SUPPORT_LOCALES" :key="locale" class="py-1">
            <button
              class=""
              :data-cy="`language-selector-${locale}`"
              @click="changeLocale(locale)"
            >
              <span class="ml-2 inline">{{ $t(`language.${locale}`) }}</span>
            </button>
          </MenuItem>
        </MenuItems>
      </div>
    </Menu>
    <div class="lg:ml-8">
      <a :href="$t('footer.contactLink')" target="_blank">
        {{ $t("footer.contactText") }}
      </a>
    </div>
  </footer>
</template>

<style scoped></style>
