<script setup>
import { IconoirProvider } from "@iconoir/vue";
import SideBar from "./components/SideBar.vue";
import { watchEffect, onMounted, ref } from "vue";
import { useCompanyStore } from "@/stores/company";
import { useThemeStore } from "@/stores/theme";
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();
const companyStore = useCompanyStore();
const themeStore = useThemeStore();
const sidebarCollapsed = ref(false);

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

	// Apply initial theme
	themeStore.applyTheme(companyStore.selectedCompany);
});

// Reactively apply theme when company changes
watchEffect(() => {
	themeStore.applyTheme(companyStore.selectedCompany);
});
</script>

<template>
	<IconoirProvider
		:icon-props="{
			color: 'white',
			'stroke-width': 2,
			width: '1.2em',
			height: '1.2em',
		}"
	>
		<div id="snw-ui">
			<div class="sidebar-column" :class="{ collapsed: sidebarCollapsed }">
				<SideBar @toggle="sidebarCollapsed = $event" />
			</div>
			<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 var(--theme-border);
	max-width: 2500px;
	width: 100%;
	margin: 10px auto;
	height: 90vh;
	background: var(--theme-background-gradient);
}

.sidebar-column {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 170px;
	min-width: 170px;
	transition: width 0.3s ease, min-width 0.3s ease;
}

.sidebar-column.collapsed {
	width: 56px;
	min-width: 56px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.sidebar-column {
		width: 140px;
		min-width: 140px;
	}

	.sidebar-column.collapsed {
		width: 56px;
		min-width: 56px;
	}
}

@media (max-width: 480px) {
	.sidebar-column {
		width: 120px;
		min-width: 120px;
	}

	.sidebar-column.collapsed {
		width: 56px;
		min-width: 56px;
	}
}

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