<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.loading') }} ...
    </div>
  </div>
  <div v-else>
		<section class="page-w bg-gray-400 dark:bg-gray-600 min-h-screen flex justify-center flex-wrap ">
      <figure class="my-auto login w-[calc(100%+1rem)]">
        <div class="max-w-sm mx-auto overflow-hidden shadow-xl dark:bg-gray-900 bg-gray-100 rounded-3xl p-2">
          <div class="flex flex-row justify-center">
						<div class="mt-1.4 ml-2">
							<button class="!outline-none text-gray-800 dark:text-gray-200" @click="toggleDark()">
								<div v-if="isDark" i-carbon-sun />
								<div v-else i-carbon-moon />
							</button>
            </div>
            <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">
              <span v-if="use_logo" class="text-lg rounded-full">
									<img v-if="isDark"
										class="m-auto mt-5"
										width="250"
										:src="`${assetsPath}/images/cvgen_b.svg`"
									/>
									<img v-else
										class="m-auto mt-5"
										width="250"
										:src="`${assetsPath}/images/cvgen_w.svg`"
									/>
              </span>
              <h2 v-else class="text-center mb-1 text-lg heading ~info">
                {{ t('login.welcome') }}
              </h2>
            </div>
          </div>
          <div v-if="use_logo" class="-mt-2 flex flex-row justify-center flex-none">
            <span class="mb-1 text-lg ">
            </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 justify-center bg-gray-300 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  type="submit"
									class="text-lg flex-grow flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
								 @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 { AppDefsAction } from '~/store/types'
import MenuLocales  from '@/MenuLocales.vue'
import {LocalesLabelModes}  from '~/typs'
import { isDark, toggleDark } from '~/composables'
import useState from '~/hooks/useState'

const assetsPath = useState().ASSETS_PATH.value

const router = useRouter()
const use_logo = router.currentRoute.value.meta.use_logo
const t = useI18n().t
// const store = useStore()
// const lang = computed(() => store.state.app_lang.lang)
const includeCurrLocale = true // computed(() => appDefs.value.includeCurrLocale || false)

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

onMounted(() => {
  // TODO call backend for logout
  localStorage.removeItem(useState().AUTHKEY.value)
})

</script>