import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'

import App from './App.vue'

import ActionsPage from './components/ActionsPage.vue'
import MealPlanPage from './components/MealPlanPage.vue'
import ShoppingPage from './components/ShoppingPage.vue'
import EditMealPage from './components/EditMealPage.vue'
import EditRecipePage from './components/EditRecipePage.vue'

// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
    { path: '/', component: ActionsPage },
    { path: '/mealplan', component: MealPlanPage },
    { path: '/shopping', component: ShoppingPage },
    { path: '/recipes/add', component: EditRecipePage },
    { path: '/recipes/:id', component: EditRecipePage, props: true },
    { path: '/meals/add', component: EditMealPage },
    { path: '/meals/:id', component: EditMealPage, props: true },
]
  
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = createRouter({
    // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
    history: createWebHashHistory(),
    routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = createApp(App)
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

// Now the app has started!