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: '/leaderboards',
    name: 'leaderboards',
    component: () => import('../views/LeaderboardView.vue')
  },
  {
    path: '/rules',
    name: 'rules',
    component: () => import('../views/RulesView.vue')
  },
  {
    path: '/schedule/:seasonNumber?/:weekNumber?',
    name: 'schedule',
    component: () => import('../views/ScheduleView.vue'),
    props: castScheduleRouteParams
  },
  {
    path: '/managers/:managerName?',
    name: 'managers',
    component: () => import('../views/ManagerView.vue'),
    props: castManagersRouteParams
  },
  {
    path: '/games/:seasonNumber/:weekNumber/:gameNumber/:team1Abbreviation/:team2Abbreviation',
    name: 'games',
    component: () => import('../views/GameView.vue'),
    props: castGamesRouteParams
  },
]

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

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

function castScheduleRouteParams(route: { params: { seasonNumber: string, weekNumber: string } }) {
  return {
    seasonNumber: Number.isNaN(Number.parseInt(route.params.seasonNumber)) ? undefined : Number(route.params.seasonNumber),
    weekNumber: Number.isNaN(Number.parseInt(route.params.weekNumber)) ? undefined : Number(route.params.weekNumber)
  }
}

function castManagersRouteParams(route: { params: { managerName: string } }) {
  return {
    managerName: route.params.managerName
  }
}

function castGamesRouteParams(route: { params: { seasonNumber: string, weekNumber: string, gameNumber: string, team1Abbreviation: string, team2Abbreviation: string } }) {
  return {
    seasonNumber: Number(route.params.seasonNumber),
    weekNumber: Number(route.params.weekNumber),
    gameNumber: Number(route.params.gameNumber),
    team1Abbreviation: route.params.team1Abbreviation,
    team2Abbreviation: route.params.team2Abbreviation,
  }
}

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

// making middleware ensure the responsive navbar is closed whenever a link is clicked
router.beforeEach(() => {
  sessionStorage.clear()
  window.dispatchEvent(new CustomEvent('navbar-storage-changed', {
    detail: {
      storage: false
    }
  }))
})

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

export default router
