<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue'
import { apiCall, useWait } from '@vnuge/vnlib.browser'
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
import UserPass from './Login/UserPass.vue'
import PkiLogin from './Login/PkiLogin.vue'
const AdminReg = defineAsyncComponent(() => import('./Login/AdminReg.vue'))

const { waiting } = useWait();
const store = useStore();
const { loggedIn, siteTitle } = storeToRefs(store);

const adminRegEnabled = computed(() => store.registation.status?.enabled && store.registation.status?.setup_mode);

const logout = () => {
    apiCall(async () => {
        const { logout } = await store.socialOauth()
        await logout()
    })
}

</script>
<template>
     <section id="login-page" class="flex-auto">
        <div class="flex flex-col items-center justify-center px-2 py-8 mx-auto sm:px-6 lg:py-24">
            <div class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
                <span class="p-2 mr-2 bg-blue-500 rounded-full">
                    <svg class="w-5 h-5 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
                        <path d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z"/>
                    </svg>
                </span>
                <span class="self-center font-semibold whitespace-nowrap">{{ siteTitle }}</span>
            </div>
            <div class="w-full bg-white rounded shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
                <div class="p-6 space-y-4 md:space-y-6 sm:p-8">

                    <div v-if="!loggedIn">
                        <!-- password/username login -->
                        <h1 class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white">
                            {{ adminRegEnabled ? "Create admin account" : "Sign in to your account" }}
                        </h1>
            
                        <TabGroup class="w-full" as="div">                           
                            <TabList as="ul" class="flex flex-wrap justify-center -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
                                 <Tab v-if="adminRegEnabled" as="template" v-slot="{ selected }" class="cursor-pointer me-2">
                                    <div class="tab group" :class="{ selected }">
                                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
                                        </svg>
                                        Create
                                    </div>
                                </Tab>
                                <Tab as="template" v-slot="{ selected }" class="cursor-pointer me-2">
                                    <div class="tab group" :class="{ selected }">
                                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
                                        </svg>
                                        Email
                                    </div>
                                </Tab>
                                <Tab as="template" v-slot="{ selected }" class="cursor-pointer me-2">
                                    <div class="tab group" :class="{ selected }">
                                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M8 18A18.55 18.55 0 0 1 0 3l8-3 8 3a18.549 18.549 0 0 1-8 15Z"/>
                                        </svg>
                                        Token
                                    </div>
                                </Tab>
                            </TabList>
                            <TabPanels class="mt-4" as="div">
                                <TabPanel v-if="adminRegEnabled" :unmount="false">
                                    <AdminReg />
                                </TabPanel>
                                <TabPanel :unmount="false">
                                    <UserPass />
                                </TabPanel>
                                <TabPanel>
                                    <PkiLogin />
                                </TabPanel>
                            </TabPanels>
                        </TabGroup>

                    </div>

                    <div v-else class="">
                        <h1 class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white">
                            Sign Out
                        </h1>

                        <div class="mt-4">
                            <button :disabled="waiting" @click="logout" class="btn">Sign Out</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style lang="scss">
#login-page {
    .tab{
        @apply inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300;

        svg{
            @apply w-4 h-4 text-gray-400 me-2 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300;
        }

        &.selected{
            @apply text-blue-600 border-b-2 border-blue-600 rounded-t-lg dark:text-blue-500 dark:border-blue-500;

            svg{
                @apply text-blue-600 me-2 dark:text-blue-500;
            }
        }
    }

    button.btn{
        @apply w-full focus:ring-4 focus:outline-none font-medium rounded text-sm px-5 py-2.5 text-center;
        @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
    }
}
</style>