<script setup>
import Status from './status/status.vue'
import Statuspage from './status/statuspage.vue'
import Export from './export/export.vue'
import Exportpage from './export/exportpage.vue'
import Image from './image/image.vue'
import Imagepage from './image/imagepage.vue'
import Wpml from './wpml/wmpl.vue'
import Setting from './setting/setting.vue'
import Settingpage from './setting/settingpage.vue'
import Guide from './guide/guide.vue'
import Guidepage from './guide/guidepage.vue'
import Cron from './cron/cron.vue'
import {ref} from 'vue';
import Psync from './propertysync/psync.vue'
import Userregistration from './userregistration/userregistration.vue'
import Userregistrationpage from './userregistration/userregistrationpage.vue'
import Form from './form/form.vue'
import Formpage from "./form/formpage.vue";


import {useBreadcrumbStore} from '../stores/breadcrumb'
import {useGlobalstateStore} from "../stores/globalstate";
import Support from './support/support.vue';
import Supportpage from './support/supportpage.vue';

const windowStore = useBreadcrumbStore();
/**
 * this to keep activation status throughout the app
 * @type {Store<"useGlobalstateStore", {isActivated: boolean}, {}, {getActivatedStatus(): void}>}
 */
const license = useGlobalstateStore();
license.getActivatedStatus();
/**
 * ends
 */
</script>
<template>
	<div class="flex">
		<div class="max-w-2xl mx-auto pt-2">
			<!--active window switcher-->
			<template v-if="true">
				<Status v-on:click="windowStore.changeActiveWindow(1)" />
				<Export v-on:click="windowStore.changeActiveWindow(3)"/>
				<!-- <Psync/> -->
				
				<!-- <Wpml/> -->

				<Setting v-on:click="windowStore.changeActiveWindow(4)"/>
				<Userregistration v-on:click="windowStore.changeActiveWindow(7)"/>
				<Form v-on:click="windowStore.changeActiveWindow(8)"/>
				<Image v-on:click="windowStore.changeActiveWindow(10)" />
				<Guide v-on:click="windowStore.changeActiveWindow(5)"/>
				<Support v-on:click="windowStore.changeActiveWindow(9)" />
			</template>
		</div>
		<!--ends-->

		<!--components to load based on active window value-->
		<div class="max-w-4xl w-3/4 mt-2 mx-auto pt-20 pb-5 px-10 bg-gray-200">
			<Statuspage v-if="windowStore.activeWindow == 0 || windowStore.activeWindow == 1"/>
			<Exportpage v-if="windowStore.activeWindow == 3"/>
			<Settingpage v-if="windowStore.activeWindow == 4"/>
			<Userregistrationpage v-if="windowStore.activeWindow == 7" />
			<Formpage v-if="windowStore.activeWindow == 8" />
			<Guidepage v-if="windowStore.activeWindow == 5" />
			<Supportpage v-if="windowStore.activeWindow == 9" />
			<Imagepage v-if="windowStore.activeWindow == 10" />
		<!--end-->
		</div>
	</div>
</template>

<style>
.active{
	background-color: blue;
}
</style>
