<template>
  <div id="app">
    <NavBar v-model="activeType"></NavBar>
    <section class="section">
      <TimeWindows :windows="windows" v-model="activeWindow"></TimeWindows>
      <Chart :active-window="activeWindow" :active-type="activeType"></Chart>
    </section>
    <router-view></router-view>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import TimeWindows from '@/components/TimeWindows.vue'
import Chart from '@/components/Chart.vue'
import { windows } from '@/utils/helpers'
import type { Window, NavTypes } from '@/utils/types'
import { navTypes } from '@/utils/types'

const defaultWindow = windows[1]
const defaultType = navTypes[0]

const activeType = ref<NavTypes>()
const activeWindow = ref<Window>(defaultWindow)

const router = useRouter()
const route = useRoute()

const urlEncodeWindow = (label: string) => label.replace(' ', '-')

if (route.params.type)
  // activeType.value = (navTypes.includes(route.params.type.toString()) ? route.params.type : navTypes[0]) as NavTypes
  activeType.value = (navTypes.find((t) => t === route.params.type) || defaultType) as NavTypes
if (route.params.window) {
  activeWindow.value = windows.find((w) => urlEncodeWindow(w.label) === route.params.window) || defaultWindow
}

const updateRoute = () => {
  if (activeType.value) {
    const route = {
      name: 'view',
      params: {
        type: activeType.value,
        window: urlEncodeWindow(activeWindow.value?.label)
      }
    }
    router.push(route)
  }
}

watch([activeWindow, activeType], () => updateRoute())
</script>
<style scoped>
#app {
  height: 100%;
}
#app,
.section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.section {
  padding-bottom: 0;
  padding-top: 0;
}
</style>
