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

function lazyLoadView(view) {
  return () => import(`@/views/${view}.vue`)
}

function lazyLoadComponent(view) {
  return () => import(`@/components/${view}.vue`)
}

const routes = [
  {
    path: '/',
    name: 'Home',
    components: {
      main: lazyLoadView('Home')
    }
  },
  {
    path: '/matches',
    name: 'Explore',
    components: {
      main: lazyLoadView('Explore')
    }
  },
  {
    path: '/player/:id',
    name: 'Player',
    components: {
      main: lazyLoadView('Player'),
    },
    props: true
  },
  {
    path: '/match/:match_id',
    name: 'Match',
    components: {
      main: lazyLoadView('Match')
    },
    props: true,
    children: [
      {
        path: 'overview',
        components: {
          score: lazyLoadComponent('ScoreTeam')
        }
      },
      {
        path: 'economy',
        components: {
          score: lazyLoadComponent('EqValueGraph')
        }
      },
      {
        path: 'details',
        components: {
          score: lazyLoadComponent('Details')
        }
      },
      {
        path: 'flashes',
        components: {
          score: lazyLoadComponent('FlashChart')
        }
      },
      {
        path: 'utility',
        components: {
          score: lazyLoadComponent('UtilityChart')
        }
      },
      {
        path: 'damage',
        components: {
          score: lazyLoadComponent('DamageSite')
        }
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/'
  }
]

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

export default router