<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" :aria-label="t('app.menu')" @click="toggleLeftDrawer" />

        <q-toolbar-title> {{ t('app.title') }} </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div>
        <div class="q-ml-md">
          <q-select
            v-model="model"
            :options="options"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            class="q-select"
            dark
          >
            <template v-slot:selected-item="scope">
              <div class="row items-center no-wrap">
                <img
                  class="border"
                  v-if="scope.opt.flagSrc"
                  :src="scope.opt.flagSrc"
                  :alt="scope.opt.label"
                  :style="scope.opt.flagStyle"
                />
                <span v-else class="lang-fallback">{{ scope.opt.value.toUpperCase() }}</span>
                <span class="bold text-white q-ml-md">{{ scope.opt.short_name }}</span>
              </div>
            </template>
            <template v-slot:option="scope">
              <q-item v-bind="scope.itemProps">
                <q-item-section avatar>
                  <img
                    v-if="scope.opt.flagSrc"
                    :src="scope.opt.flagSrc"
                    :alt="scope.opt.label"
                    :style="scope.opt.flagStyle"
                  />
                  <span v-else class="lang-fallback">{{ scope.opt.value.toUpperCase() }}</span>
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ scope.opt.label }}</q-item-label>
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';

import { usePreferencesStore, type LanguageCode } from 'src/stores/preferences-store';

const { t } = useI18n();
const leftDrawerOpen = ref(false);
const preferencesStore = usePreferencesStore();
const model = computed({
  get: () => preferencesStore.language,
  set: (language: LanguageCode) => {
    preferencesStore.setLanguage(language);
  },
});
const flagModules = import.meta.glob('../assets/flags/*', {
  eager: true,
  import: 'default',
});

const langs = [
  {
    code: 'it',
    short_name: 'IT',
    flag: 'it.svg',
    style: 'width:32px;height:22px;',
  },
  {
    code: 'en',
    short_name: 'EN',
    flag: 'en.svg',
    style: 'width:32px;height:22px;',
  },
  {
    code: 'en_us',
    short_name: 'EN',
    flag: 'en_us.svg',
    style: 'width:32px;height:22px;',
  },
  {
    code: 'de',
    short_name: 'DE',
    flag: 'de.svg',
    style: 'width:32px;height:22px;',
  },
  {
    code: 'de_ch',
    short_name: 'DE',
    flag: 'ch.svg',
    style: 'width:22px;height:22px;object-fit: cover;',
  },
  {
    code: 'fr',
    short_name: 'FR',
    flag: 'fr.svg',
    style: 'width:32px;height:22px;',
  },
  {
    code: 'fr_ch',
    short_name: 'FR',
    flag: 'ch.svg',
    style: 'width:22px;height:22px;object-fit: cover;',
  },
];

const options = computed(() =>
  langs.map((lang) => ({
    label: t(`language.${lang.code}`),
    value: lang.code,
    flagSrc: flagModules[`../assets/flags/${lang.flag}`] ?? null,
    flagStyle: lang.style,
    short_name: lang.short_name,
  })),
);

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}
</script>

<style scoped>
.lang-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}

.border {
  border: 1px solid #fff;
  border-radius: 4px;
}

.q-select {
  i.q-icon {
    color: white !important;
  }
}
</style>
