import { Routes } from '@angular/router';
import { authGuard } from './auth/auth.guard';
import { LoginComponent } from './auth/login/login.component';
import { RegisterComponent } from './auth/register/register.component';
import { AccountComponent } from './account/account.component';
import { VerifyEmailComponent } from './auth/verify-email/verify-email.component';
import { ListDetailComponent } from './lists/list-detail/list-detail.component';
import { ListsComponent } from './lists/lists.component';
import { TemplatesComponent } from './templates/templates.component';
import { TemplateDetailComponent } from './templates/template-detail/template-detail.component';

export const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'verify-email', component: VerifyEmailComponent },
  {
    path: 'auth',
    children: [{ path: 'verify-email', component: VerifyEmailComponent }],
  },
  { path: 'templates', component: TemplatesComponent, canActivate: [authGuard] },
  {
    path: 'templates/new',
    component: TemplateDetailComponent,
    canActivate: [authGuard],
  },
  {
    path: 'templates/:templateId',
    component: TemplateDetailComponent,
    canActivate: [authGuard],
  },
  { path: 'lists', component: ListsComponent, canActivate: [authGuard] },
  { path: 'lists/new', component: ListDetailComponent, canActivate: [authGuard] },
  { path: 'lists/:listId', component: ListDetailComponent, canActivate: [authGuard] },
  { path: 'listen', redirectTo: 'lists' },
  { path: 'account', component: AccountComponent, canActivate: [authGuard] },
  { path: '**', redirectTo: 'login' },
];