<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />

        <q-toolbar-title> Quasar App </q-toolbar-title>

        <q-space />

        <div class="row items-center no-wrap">
          <div class="q-mr-md">Quasar v{{ $q.version }}</div>
          <q-badge outline color="white" class="q-mr-sm">commit {{ commitCode }}</q-badge>

          <q-btn flat dense icon="language" :label="currentLocaleLabel" aria-label="Language">
            <q-menu auto-close>
              <q-list>
                <q-item clickable v-for="loc in locales" :key="loc.code" @click="setLocale(loc.code)">
                  <q-item-section>{{ loc.label }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <q-scroll-area class="fit">
        <div class="q-pa-md">
          <div class="text-subtitle2 q-mb-sm">Dati contribuente</div>
          <pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(taxpayer.data), null, 2) }}</pre>
        </div>
         <div class="q-pa-md">
          <div class="text-subtitle2 q-mb-sm">Dati stato civile</div>
          <pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(marital.data), null, 2) }}</pre>
        </div>
         <div class="q-pa-md">
          <div class="text-subtitle2 q-mb-sm">Dati figli</div>
          <pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(children.data), null, 2) }}</pre>
        </div>
      </q-scroll-area>
    </q-drawer>

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

    <q-footer elevated class="bg-white">
      <q-toolbar class="q-pl-md q-pr-md">
        <div class="row items-center no-wrap">
          <div class="col"> </div>
          <div>
            <q-btn flat dense icon="language" :label="currentLocaleLabel" aria-label="Language">
              <q-menu auto-close>
                <q-list>
                  <q-item clickable v-for="loc in locales" :key="loc.code" @click="setLocale(loc.code)">
                    <q-item-section>{{ loc.label }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
        </div>
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

<script setup lang="ts">
import { ref, unref, computed } from 'vue';
import { useTaxpayerStore } from '../stores/taxpayer'
import { useMaritalStore } from '../stores/marital';
import { useChildrenStore } from '../stores/children'
import { useI18n } from 'vue-i18n'
import { COMMIT_CODE } from '../generated/commit-info'

const leftDrawerOpen = ref(false);

const taxpayer = useTaxpayerStore()
const marital = useMaritalStore()
const children = useChildrenStore()

const { locale } = useI18n()
const commitCode = COMMIT_CODE

const locales = [
  { code: 'it-IT', label: 'Italiano' },
  { code: 'en-US', label: 'English' },
  { code: 'fr-FR', label: 'Français' },
  { code: 'de-DE', label: 'Deutsch' }
]

function setLocale(code: string) {
  locale.value = code
}

const currentLocaleLabel = computed(() => {
  const found = locales.find(l => l.code === locale.value)
  return found ? found.label : String(locale.value)
})

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