<template>
  <div v-if="isCheckin">
    <div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
      <div class="dot1" />
      <div class="dot2" />
    </div>
    <div class="flex justify-center text-2xl">
      {{ t('message.loadding') }} ...
    </div>
  </div>
  <div v-else>
    <section class="page-w bg-gray-200 h-full flex content-center flex-wrap ">
      <figure class="p-1 login w-[calc(100%+1rem)]">
        <div class="card ~neutral !low p-0 max-w-sm dark:bg-gray-900 ">
          <div class="flex flex-row justify-center flex-none">
            <div class="order-last flex-shrink-0">
              <MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
            </div>
            <div class="p-1 ml-8 flex flex-shrink-0 justify-center flex-grow bg-transparent">
							<router-link class="text-white no-underline" to="/" >
								<span v-if="use_logo" class="text-lg rounded-full">
									<app-logo-img class="w-35 h-35 " />
								</span>
								<h2 v-else class="text-center mb-1 text-lg heading ~info">
									{{ t('login.wellcome') }}
								</h2>
              </router-link>
            </div>
          </div>
          <div v-if="use_logo" class="-mt-2 flex flex-row justify-center flex-none">
            <span class="mb-1 text-lg ">
              <app-logo-text class="h-12" />
            </span>
          </div>
          <div class="p-2">
            <p class="text-center mb-3 text-base support ~info dark:text-gray-100">
              {{ t('login.subtitle') }}
            </p>
            <div class="container">
              <h5 class="text-center subheading mb-4 dark:text-gray-200">
                {{ t('login.end_session') }}
              </h5>
              <div class="messages global">
              </div>
              <div class="alternative-actions border-t border-b flex gap-4 py-2 section ~info justify-center dark:bg-gray-600 ">
                <!-- <a href="auth/registration">Recover password</a>  -->
                <h3 class=" ~critical text-xl p-4 dark:text-gray-100">
                  {{ t('login.see_you_soon','') }}
                </h3>
              </div>
              <div class="mt-8 flex justify-center">
                <button class="text-lg button ~info  " type="submit" @click.prevent="signIn">
                  {{ t('login.signin') }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </figure>
    </section>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  onMounted,
} from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import MenuLocales from '@/menus/MenuLocales.vue'
import AppLogoImg from '@/icons/AppImg.vue'
import AppLogoText from '@/icons/AppLogoText.vue'
import { AppDefsAction } from '~/store/types'
// import useState from '~/hooks/useState'

enum LocalesLabelModes {
  value = 'val',
  translation = 'trans',
}

const router = useRouter()
const root_url = router.currentRoute.value.meta.rooturl || ''
const map_key = router.currentRoute.value.meta.uiMapkey || 'ui'
const use_logo = router.currentRoute.value.meta.use_logo
const { t, } = useI18n()
const store = useStore()
// const lang = computed(() => store.state.app_lang.lang)
const includeCurrLocale = true // computed(() => appDefs.value.includeCurrLocale || false)

const localesLabelMode = ref(LocalesLabelModes.translation as LocalesLabelModes)
//const errorMessage = ref('')
const isCheckin = ref(false)
const signIn = async() => {
  router.push('/login')
}

onMounted(() => {
  localStorage.removeItem('auth')
	if (store && store.state && store.state.app_defs && store.state.app_defs.main) {
		const uidefs = store.state.app_defs.main.get(map_key)
		if (uidefs)
		  store.dispatch(AppDefsAction.removeDefs, uidefs)
	}
  //  location.reload()
})

</script>

<style scoped>
  .page-w {
  min-width: 100vw;
/* position: absolute;
  top: 0;
*/
  min-height: 100vh;
  color: var(--primary-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  }
  .login {
/* position: absolute;*/
/* top: 45%;*/
/* left: 50%;*/
/* margin-right: -50%; */
/* transform: translate(-50%, -50%) */
/* margin: 0 auto; */
  }
</style>
