<script setup lang="ts">
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import { version } from '../package.json'

import ModalDialog from '@/components/ModalDialog.vue'
import LocaleSwitcher from '@/components/LocaleSwitcher.vue'
import LinkButton from '@/components/LinkButton.vue'
import SiteNavigation from '@/components/SiteNavigation.vue'
import NavigationItem from '@/components/NavigationItem.vue'
import LanguageButton from '@/components/LanguageButton.vue'
import SiteFooter from '@/components/SiteFooter.vue'

import LanguageIcon from '@/assets/icons/LanguageIcon.vue'

const locales = [
  { code: 'en', name: 'English', flag: '🇬🇧' },
  { code: 'de', name: 'Deutsch', flag: '🇩🇪' }
]

const langswitcher = ref<InstanceType<typeof ModalDialog>>()

const showModal = () => {
  langswitcher.value?.showModal()
}

const close = () => {
  langswitcher.value?.close()
}
</script>

<template>
  <ModalDialog id="lang-select" ref="langswitcher">
    <template #heading>{{ $t('langswitcher.title') }}</template>
    <template #message>
      <p>{{ $t('langswitcher.prompt') }}</p>
      <LocaleSwitcher id="locale-switch" v-model="$i18n.locale" :locales="locales" />
    </template>
    <template #buttons>
      <LinkButton @click.prevent="close()">
        {{ $t('langswitcher.buttonClose') }}
      </LinkButton>
    </template>
  </ModalDialog>

  <SiteNavigation>
    <NavigationItem
      v-for="(route, idx) in $router.getRoutes()"
      :key="idx"
      :icon="route.meta?.icon"
      :href="route.path"
    >
      {{ $t(`${route.meta?.title}`) }}
    </NavigationItem>
  </SiteNavigation>

  <main>
    <LanguageButton>
      <LanguageIcon @click.prevent="showModal()" />
    </LanguageButton>
    <RouterView v-slot="{ Component }">
      <Transition name="fade" mode="out-in">
        <component :is="Component" :key="$route.path" />
      </Transition>
    </RouterView>
  </main>

  <SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>
</template>
