<script setup>
import { ref, onMounted } from "vue";
import { IconoirProvider } from "@iconoir/vue";
import SideBar from "./components/SideBar.vue";
import CreateClientModal from "./components/modals/CreateClientModal.vue";
import CreateEstimateModal from "./components/modals/CreateEstimateModal.vue";
import CreateJobModal from "./components/modals/CreateJobModal.vue";
import CreateInvoiceModal from "./components/modals/CreateInvoiceModal.vue";
import CreateWarrantyModal from "./components/modals/CreateWarrantyModal.vue";
import GlobalLoadingOverlay from "./components/common/GlobalLoadingOverlay.vue";
import ScrollPanel from "primevue/scrollpanel";
import Toast from "primevue/toast";
import { useNotificationStore } from "@/stores/notifications-primevue";

// Get the notification store and create a ref for the toast
const notificationStore = useNotificationStore();
const toast = ref();

// Connect the toast instance to the store when component mounts
onMounted(() => {
	if (toast.value) {
		notificationStore.setToastInstance(toast.value);
	}
});
</script>

<template>
	<IconoirProvider
		:icon-props="{
			color: 'white',
			'stroke-width': 2,
			width: '1.2em',
			height: '1.2em',
		}"
	>
		<div id="snw-ui">
			<SideBar />
			<div id="display-content">
				<ScrollPanel style="width: 100%; height: 100%">
					<RouterView />
				</ScrollPanel>
			</div>
		</div>

		<!-- Global Modals -->
		<CreateClientModal />
		<CreateEstimateModal />
		<CreateJobModal />
		<CreateInvoiceModal />
		<CreateWarrantyModal />

		<!-- Global Loading Overlay -->
		<GlobalLoadingOverlay />

		<!-- Global Notifications -->
		<Toast ref="toast" />
	</IconoirProvider>
</template>

<style lang="css">
#snw-ui {
	display: flex;
	flex-direction: row;
	border-radius: 10px;
	padding: 10px;
	border: 4px solid rgb(235, 230, 230);
	max-width: 2500px;
	width: 100%;
	margin: 10px auto;
	height: 90vh;
}

#display-content {
	/* flex-grow: 1; */
	margin-left: auto;
	margin-right: auto;
	max-width: 50vw;
	min-width: 80%;
	height: 100%;
}
</style>
