import { Routes } from '@angular/router';

import { AuthLayoutComponent } from '../../core/layout/auth-layout/auth-layout.component';
import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
import { guestOnlyGuard } from '../../core/services/auth/auth.guards';
import { LoginPageComponent } from './pages/login-page/login-page.component';
import { RegisterPageComponent } from './pages/register-page/register-page.component';
import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';

export const routes: Routes = [
  {
    path: '',
    component: StoreLayoutComponent,
    children: [
      {
        path: '',
        component: StoreHomePageComponent
      },
      {
        path: 'login',
        canActivate: [guestOnlyGuard],
        component: AuthLayoutComponent,
        children: [
          {
            path: '',
            component: LoginPageComponent
          }
        ]
      },
      {
        path: 'register',
        canActivate: [guestOnlyGuard],
        component: AuthLayoutComponent,
        children: [
          {
            path: '',
            component: RegisterPageComponent
          }
        ]
      },
      {
        path: 'producto/:id',
        loadComponent: () =>
          import('./pages/product-detail-page/product-detail-page.component').then(
            (m) => m.ProductDetailPageComponent
          )
      }
    ]
  }
];