<template>
    <div class="calendar-navigation">
		<Tabs :value="defaultTab" v-if="companyStore.currentCompany == 'Sprinklers Northwest'">
			<TabList>
				<Tab value="0">Bids</Tab>
				<Tab value="1">Projects</Tab>
				<Tab value="2">Service</Tab>
				<Tab value="6">Warranties</Tab>
			</TabList>
			<TabPanels>
				<TabPanel header="Bids" value="0">
					<ScheduleBid />
				</TabPanel>
				<TabPanel header="Projects" value="1">
						<SNWProjectCalendar />
				</TabPanel>
				<TabPanel header="Service" value="2">
					<div class="coming-soon">
						<p>Service feature coming soon!</p>
					</div>
				</TabPanel>
				<TabPanel header="Warranties" value="6">
					<div class="coming-soon">
						<p>Warranties Calendar coming soon!</p>
					</div>
				</TabPanel>
			</TabPanels>
		</Tabs>
		<Tabs v-else :value="defaultTab">
			<TabList>
				<Tab value="0">Bids</Tab>
				<Tab value="1">Projects</Tab>
				<Tab value="2">Service</Tab>
				<Tab value="3">Warranties</Tab>
			</TabList>
			<TabPanels>
				<TabPanel header="Bids" value="0">
					<ScheduleBid />
				</TabPanel>
				<TabPanel header="Projects" value="1">
					<div class="coming-soon">
						<p>Calendar Coming Soon!</p>
					</div>
				</TabPanel>
				<TabPanel header="Service" value="2">
					<div class="coming-soon">
						<p>Calendar Coming Soon!</p>
					</div>
				</TabPanel>
				<TabPanel header="Service" value="2">
					<div class="coming-soon">
						<p>Calendar Coming Soon!</p>
					</div>
				</TabPanel>
				<TabPanel header="Warranties" value="3">
					<p>Calendar Coming Soon!</p>
				</TabPanel>
			</TabPanels>
		</Tabs>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Tab from 'primevue/tab';
import Tabs from 'primevue/tabs';
import TabList from 'primevue/tablist';
import TabPanel from 'primevue/tabpanel';
import TabPanels from 'primevue/tabpanels';
import ScheduleBid from '../calendar/bids/ScheduleBid.vue';
import SNWProjectCalendar from './jobs/SNWProjectCalendar.vue';
import { useNotificationStore } from '../../stores/notifications-primevue';
import { useCompanyStore } from '../../stores/company';
import { useRoute } from 'vue-router';

const companyStore = useCompanyStore();
const route = useRoute();

const defaultTab = ref('0');

const mappedTabs = {
	'bid': '0',
	'projects': '1',
	'service': '2',
	'warranties': companyStore.currentCompany == 'Sprinklers Northwest' ? '6' : '3'
};

onMounted(() => {
	// Check for route query parameter to set default tab
	if (route.query.tab) {
		defaultTab.value = mappedTabs[route.query.tab] || '0';
	}
});
</script>

<style scoped>
.calendar-navigation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calendar-navigation :deep(.p-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calendar-navigation :deep(.p-tabpanels) {
    flex: 1;
    overflow: hidden;
}

.calendar-navigation :deep(.p-tabpanel) {
    height: 100%;
}

.coming-soon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    color: var(--theme-text-muted);
    font-size: 1.2rem;
}
</style>
