import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

const HomeView = () => import('../views/HomeView.vue')

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/teams/:seasonNumber/:teamAbbreviation',
    name: 'team',
    component: () => import('../views/TeamView.vue'),
    props: castTeamsRouteParams
  },
  {
    path: '/managers/:managerName',
    name: 'manager',
    component: () => import('../views/ManagerView.vue'),
    props: true
  },
  {
    path: '/players/:seasonNumber/:playerName',
    name: 'player',
    component: () => import('../views/PlayerView.vue'),
    props: castPlayersRouteParams
  },
  {
    path: '/standings',
    name: 'standings',
    component: () => import('../views/StandingsView.vue')
  },
  {
    path: '/rules',
    name: 'rules',
    component: () => import('../views/RulesView.vue')
  },
]

function castTeamsRouteParams(route: any) {
  return {
    teamAbbreviation: route.params.teamAbbreviation,
    seasonNumber: Number(route.params.seasonNumber)
  }
}

function castPlayersRouteParams(route: any) {
  return {
    playerName: route.params.playerName,
    seasonNumber: Number(route.params.seasonNumber)
  }
}

export const router = createRouter({
  history: createWebHistory(), //import.meta.env.BASE_URL),
  routes,
})

// export function routerPush (name: AppRouteNames, params?: RouteParams): ReturnType<typeof router.push> {
//   return params !== undefined
//     ? router.push({
//       name,
//       params,
//     })
//     : router.push({ name })
// }

export default router
