
import NotFound from "../pages/NotFound.svelte";
import ProfileDisplay from '../pages/profile/ProfileDisplay.svelte';
import ProfileSettings from '../pages/profile/ProfileSettings.svelte';
import ProfileFriends from '../pages/profile/ProfileFriends.svelte';
import { wrap } from 'svelte-spa-router/wrap'

// establishing the prefix here very clearly so we can have a coherent repeatable structure
export const prefix = '/profile';

export const profileRoutes = {
  '/': ProfileDisplay,
  '/settings': ProfileSettings,
  '/friends': ProfileFriends,
  '*': NotFound
};

// I think the conditions of access like are you authenticated work best when they are on the parent routes not the nested routes cuz i don't want my header showing up

// export const profileRoutes = {
//   '/': wrap({
//     component: ProfileDisplay,
//     conditions: [
//       (detail) => {
//         const { fortyTwo, tfa } = get(loginStatus);
//         console.log(fortyTwo);
//         console.log(tfa);
//         console.log('in Profile Display');
//         // return true;
//         return (fortyTwo && tfa);
//       }
//     ]
//   }),
//   '/settings': wrap({
//     component: ProfileSettings,
//     conditions: [
//       (detail) => {
//         const { fortyTwo, tfa } = get(loginStatus);
//         // console.log(fortyTwo);
//         // console.log(tfa);
//         // return true;
//         return (fortyTwo && tfa);
//       }
//     ]
//   }),
//   '*': NotFound
// };

// what if i did /#/profile/:id for like not the user? and then based on that did a fetch?