<template>
  <div class="wrap">
    <AppHeader />
    <div class="calendar-container" ref="containerEl">
      <CalendarGrid />
      <Jogwheel />
    </div>
    <EventDialog />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import AppHeader from './AppHeader.vue'
import CalendarGrid from './CalendarGrid.vue'
import Jogwheel from './Jogwheel.vue'
import EventDialog from './EventDialog.vue'
import { useCalendarStore } from '@/stores/CalendarStore'

const calendarStore = useCalendarStore()
const containerEl = ref(null)

let intervalId

onMounted(() => {
  calendarStore.setToday()
  intervalId = setInterval(() => {
    calendarStore.setToday()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(intervalId)
})
</script>
