<script lang="ts" setup>

/*=========================================================================================
  File Name: show profile
  
  ----------------------------------------------------------------------------------------
  Author: Arno Kaimbacher
  Author URL: https://jakint.at/
==========================================================================================*/



// import { useUrlSearchParams } from '@vueuse/core';
// import { usePage } from '@inertiajs/vue3';
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
import { ref, computed } from 'vue';
// import IconRounded from '@/Components/IconRounded.vue';


// import AdminLayout from '@/Layouts/AdminLayout.vue';
// import AppLayout from '@/Layouts/AppLayout.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';

import UpdatePasswordForm from '@/Pages/profile/partials/update-password-form.vue';
import UpdateProfileInformationForm from '@/Pages/profile/partials/update-profile-information-form.vue';
import { usePage } from '@inertiajs/vue3';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import { mdiAccount, mdiArrowLeftBoldOutline, mdiFormTextboxPassword } from '@mdi/js';
import { stardust } from '@eidellev/adonis-stardust/client';
import BaseButton from '@/Components/BaseButton.vue';
import BaseIcon from '@/Components/BaseIcon.vue';

defineProps({
    user: {
        type: Object,
        required: true,
    },
    defaultUrl: {
        type: String,
        required: true,
    },
});

const tabs = [
	{ id: 1, title: 'My Profile', icon: mdiAccount },
	{ id: 2, title: 'Change Password', icon: mdiFormTextboxPassword },
];

// const params = useUrlSearchParams('history');
const selectedTab = ref(0);

function changeTab(index: number) {
	selectedTab.value = index;
}

const user = computed(() => usePage().props.user);
// const sessions = computed(() => usePage().props.sessions);
// const Layout = computed(() => (user.value.is_super_admin ? AdminLayout : AppLayout));
</script>

<template>
	<Component :is="LayoutAuthenticated">

		<Head title="Profile"></Head>
		<SectionMain>
			<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
				<BaseButton :route-name="stardust.route('dashboard')" :icon="mdiArrowLeftBoldOutline" label="Back"
					color="white" rounded-full small />
			</SectionTitleLineWithButton>

			<!-- <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
				{{ flash.message }}
			</NotificationBar> -->

			<div class="">
				<TabGroup :selectedIndex="selectedTab" @change="changeTab">
					<TabList class="flex space-x-7 p-1">
						<Tab v-for="(tab, index) in tabs" as="template" :key="index" v-slot="{ selected }">
							<button :class="[
								'inline-flex items-center justify-center font-semibold focus:outline-none  disabled:opacity-25 pb-2',
								selected
									? 'text-dark border-b-2 border-primary transition-all duration-500 inline-block'
									: 'text-light',
							]">
								<!-- <IconRounded :name="tab.icon" class="h-5 mr-3" /> -->
								<BaseIcon :path="tab.icon" class="flex-none" w="w-12" />
								{{ tab.title }}
							</button>
						</Tab>
					</TabList>
					<transition v-show="selectedTab >= 0" enter-active-class="transition duration-100 ease-out"
						enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
						leave-active-class="transition duration-75 ease-in"
						leave-from-class="transform scale-100 opacity-100"
						leave-to-class="transform scale-95 opacity-0">
						<TabPanels class="mt-2">
							<TabPanel :key="Date.now().toString() + 1" :class="[]">
								<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
									<UpdateProfileInformationForm class="p-5" :user="user" :default-url="defaultUrl" />
								</div>
							</TabPanel>
							<TabPanel :key="Date.now().toString() + 3" :class="[]">
								<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-x-5 gap-y-7 items-start"> -->
								<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
									<UpdatePasswordForm class="p-5" />
								</div>
							</TabPanel>

						</TabPanels>
					</transition>
				</TabGroup>
			</div>
		</SectionMain>
	</Component>
</template>

<style>
.cool-link::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background: #fda92d;
	transition: width 0.3s;
}

.cool-link:hover::after {
	width: 100%;
}
</style>

<!-- <script>
import { defineComponent } from 'vue';

export default defineComponent({
	layout: false,
});
</script> -->