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

import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-layout.component';
import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
import { authGuard, 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: SimpleLayoutComponent,
        children: [
          {
            path: '',
            component: LoginPageComponent
          }
        ]
      },
      {
        path: 'register',
        canActivate: [guestOnlyGuard],
        component: SimpleLayoutComponent,
        children: [
          {
            path: '',
            component: RegisterPageComponent
          }
        ]
      },
      {
        path: 'producto/:id',
        loadComponent: () =>
          import('./pages/product-detail-page/product-detail-page.component').then(
            (m) => m.ProductDetailPageComponent
          )
      },
      {
        path: 'checkout',
        canActivate: [authGuard],
        loadComponent: () =>
          import('./pages/checkout-page/checkout-page.component').then(
            (m) => m.CheckoutPageComponent
          )
      },
      {
        path: 'checkout/status',
        component: SimpleLayoutComponent,
        children: [
          {
            path: ':id',
            loadComponent: () =>
              import('./pages/purchase-status-page/purchase-status-page.component').then(
                (m) => m.PurchaseStatusPageComponent
              )
          }
        ]
      },
      {
        path: 'mi-cuenta',
        canActivate: [authGuard],
        loadComponent: () =>
          import('./pages/account-page/account-layout/account-layout').then(
            (m) => m.AccountLayout
          ),
        children: [
          {
            path: 'datos-personales',
            loadComponent: () =>
              import('./pages/account-page/pages/profile-page/profile-page').then(
                (m) => m.ProfilePage
              )
          },
          {
            path: 'compras',
            loadComponent: () =>
              import('./pages/account-page/pages/purchases-page/purchases-page').then(
                (m) => m.PurchasesPage
              )
          },
          {
            path: '',
            redirectTo: 'datos-personales',
            pathMatch: 'full'
          }
        ]
      }
    ]
  }
];