<script lang="ts">
  import NotFound from "../src/pages/NotFound.svelte";
import ProfilePage from "../src/pages/profile/ProfilePage.svelte";
import SplashPage from "../src/pages/SplashPage.svelte";
import TwoFactorAuthentication from '../src/pages/TwoFactorAuthentication.svelte';
import UnauthorizedAccessPage from '../src/pages/UnauthorizedAccessPage.svelte';
import { wrap } from 'svelte-spa-router/wrap'
import { get } from 'svelte/store';

import TestPage from '../src/pages/TmpTestPage.svelte';
import { userStore, userLogout } from "../src/stores/loginStatusStore";



//   "/article/:title": Article, // this is how you would do parameters!
// "/": LoginPage,

// TMP not using this cuz need to work out how to authentical both 42 and 2FA from the backend

// export const primaryRoutes = {
//   '/': SplashPage,
//   // '/2fa': TwoFactorAuthentication,
//   '/2fa': wrap({
//     component: TwoFactorAuthentication,
//     conditions: [
//       (detail) => {
//         // let loggedIn;
//         // loginStatus.subscribe(value => {
//        //   loggedIn = value;
//        // });

//         const { fortyTwo, tfa } = get(loginStatus);

//         console.log('condition in /2fa');
//         // return (loginStatus.fortyTwo && loginStatus.tfa);
//         // console.log($loginStatus.fortyTwo)
//         console.log(fortyTwo);
//         console.log(tfa);
//         return true;
//       }
//     ]
//   }),
//   '/profile': wrap({
//     component: ProfilePage,
//     conditions: [
//       (detail) => {
//         const { fortyTwo, tfa } = get(loginStatus);
//         // console.log(fortyTwo);
//         // console.log(tfa);
//         // return true;
//         return (fortyTwo && tfa);
//       }
//     ]
//   }),
//   '/profile/*': wrap({
//     component: ProfilePage,
//     conditions: [
//       (detail) => {
//         const { fortyTwo, tfa } = get(loginStatus);
//         // console.log(fortyTwo);
//         // console.log(tfa);
//         // return true;
//         return (fortyTwo && tfa);
//       }
//     ]
//   }),
//   '/profile': wrap({
//         // Use a dynamically-loaded component for this
//         asyncComponent: () => import('./ProfilePage.svelte'),
//         // Adding one pre-condition that's an async function
//         conditions: [
//           async (detail) => {
//             // Make a network request, which are async operations
//             const response = await fetch('http://transcendance:8080/api/v2/user')
//             const data = await response.json()
//             // Return true to continue loading the component, or false otherwise
//             if (data.isAdmin) {
//               return true
//             }
//             else {
//               return false
//             }
//           }
//         ]
//       }),
//   '/unauthorized-access': UnauthorizedAccessPage,
//   '*': NotFound
// };

export const primaryRoutes = {
  "/": SplashPage,
  '/test': wrap({
    component: TestPage,
    conditions: [
      (detail) => {
        // const user = get(userStore);  // seems like get(store) is not an option
        // // const user = userStore;
        // // console.log(fortyTwo);
        // // console.log(tfa);
        // console.log('in /test what is in user')
        // console.log(user)

        // you moron $userStore is a Svelte Abreviation, this is .JS, duh
        // let user = $userStore;
        let user;
        const unsub = userStore.subscribe(value => {
          user = value;
        });
        console.log('in /test what is in userStore directly')
        console.log(user)

        // return true;
        // obvi this doesn't work cuz skips to true after no user...
          // you gotta make the condition the true and the everything else false
        // if (user && user.statusCode && user.statusCode === 403)
        // if (user !== null) {
        if (user && user.username) {
          unsub();
          return true;
        } else {
          unsub();
          return false;
        }
      }
    ]
  }),
  // '/test': wrap({
  //   component: TestPage,
  //   conditions: [
  //     async(detail) => {
  //       // THIS SHIT TOTALLY WORKS
  //       const user = await fetch('http://transcendance:8080/api/v2/user')
  //       .then((resp) => resp.json())

  //       console.log('in /test what is in user')
  //       console.log(user)

  //       if (user && user.username)
  //         return true;
  //       else
  //         return false;
  //     }
  //   ]
  // }),
  '/2fa': TwoFactorAuthentication,
  "/profile": ProfilePage,
  "/profile/*": ProfilePage,
  '/unauthorized-access': UnauthorizedAccessPage,
  "*": NotFound
};

// export const primaryRoutes = {
//   "/": SplashPage,
//   "/profile": ProfilePage,
//   "/game": GamePage,
//   "/chat": ChatPage,
//   "*": NotFound
// };


// i might need to add /profile/* and such to make the nested routers work

// ok maybe these need to be in their own files?



// export const gameRoutes = {
//   "/": GamePage,
//   "*": NotFound
// };

// export const chatRoutes = {
//   "/": ChatPage,
//   "*": NotFound
// };

</script>