import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'
import ContactView from '@/views/ContactView.vue'
import SoftwareView from '@/views/SoftwareView.vue'
import GardeningView from '@/views/GardeningView.vue'
import LogBookView from '@/views/LogBookView.vue'
import MainSite from '@/views/MainSite.vue'
import GardenDetails from '@/views/GardenDetails.vue'
import HikingView from '@/views/HikingView.vue'
import GardenHerbsView from '@/views/GardenHerbsView.vue'
import { nextTick } from 'vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // Most paths are nested under the MainSite component, which provides the
    // common header links and formatting.
    {
      path: '/',
      component: MainSite,
      children: [
        {
          path: '',
          component: HomeView
        },
        {
          path: 'about',
          component: AboutView,
          meta: {
            title: 'About Andrew (and this site)',
            description: 'Information about Andrew, and technical information about this website.'
          }
        },
        {
          path: 'contact',
          component: ContactView,
          meta: {
            title: "Andrew's Contact Info",
            description: 'Information for how to get in touch with Andrew.'
          }
        },
        {
          path: 'software',
          component: SoftwareView,
          meta: {
            title: "Andrew's Software",
            description: 'A brief collection of software developed by Andrew.'
          }
        },
        {
          path: 'gardening',
          component: GardeningView,
          meta: {
            title: "Andrew's Gardening",
            description: "Information about Andrew's gardening experiences."
          }
        },
        {
          path: 'hiking',
          component: HikingView,
          meta: {
            title: "Andrew's Hiking",
            description: 'A logbook of notable summits and hikes Andrew has completed.'
          }
        },
        {
          path: 'logbook',
          component: LogBookView,
          meta: {
            title: "Andrew's Logbook",
            description:
              "Interactive messageboard where people can leave a public note on Andrew's website."
          }
        }
      ]
    },
    {
      path: '/garden-details',
      component: GardenDetails
    },
    {
      path: '/gardening/herbs',
      component: GardenHerbsView,
      meta: {
        title: "Andrew's Herb Garden",
        description: "Information about Andrew's herb garden."
      }
    }
  ]
})

// Custom logic after navigation to change top-level document properties based
// on the selected route's metadata.
router.afterEach((to) => {
  nextTick(() => {
    // Set document title if available.
    if (to.meta.title && typeof to.meta.title === 'string') {
      document.title = to.meta.title
    } else {
      document.title = 'Andrew Lalis'
    }
    // Set document description meta tag if available.
    const metaTag = document.querySelector("meta[name='description']") as HTMLMetaElement
    if (metaTag) {
      if (to.meta.description && typeof to.meta.description === 'string') {
        metaTag.content = to.meta.description
      } else {
        metaTag.content = "Andrew's homepage on the internet."
      }
    }
  })
})

export default router
