<script setup>
	import { onMounted, ref } from 'vue'

	import Summary from './components/summary.vue'
	import ShowCategory from './components/show_category.vue'
	import Songs from './components/songs.vue'
	import Timer from './components/timer.vue'
	import Status from './components/status.vue'
	
	const currentWorkingCategory = ref(null)
	const summaryRef = ref(null)
	const statusRef = ref(null)
	const showCategoryRef = ref(null)
	const instruments = ref([])
	const categories = ref([])

	const updateCurrentWorkingCategoryID = (category) =>{
		currentWorkingCategory.value = category
	}

	const refreshPage = (session) => {
		summaryRef.value.loadData()
		statusRef.value.loadData()
		showCategoryRef.value.loadCategory(session.practice_category_id)
	}

	const loadData = async () => {
		let response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'instruments')
		instruments.value = await response.json()
		response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories')
		categories.value = await response.json()
		currentWorkingCategory.value = categories.value[0]
	}
	onMounted(loadData)
</script>

<template>
	<main>
		<section id="timer">
			<Status ref="statusRef"/>
			<!--
			<Timer 
				@loggedTime="refreshPage"
				:categories="categories"
				:instruments="instruments"
				:currentWorkingCategory="currentWorkingCategory"/>
			-->
		</section>
		<section id="summary">
			<Summary ref="summaryRef" @update="updateCurrentWorkingCategoryID"/>
		</section>
		<section id="category">
			<ShowCategory
				v-if="categories.length > 0"
				:instruments="instruments"
				:categories="categories"
				ref="showCategoryRef"
				:currentWorkingCategory="currentWorkingCategory"/>
		</section>
		<section id="songs">
			<Songs/>
		</section>
	</main>
</template>
