<svelte:head>
    <title>Transporte: Usuario</title>
</svelte:head>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import '@adminkit/core/dist/css/app.css'
import '@adminkit/core/dist/js/app.js'
import 'bootstrap-icons/font/bootstrap-icons.css'
import '../assets/colors.css'
import '../assets/custom.css'
import Navbar from './Navbar.svelte'
import Sidebar from './Sidebar.svelte'
import Footer from './Footer.svelte'
import Notifications from './Notifications.svelte'
import { getRoutes } from '$/routes/user.routes'
import { Router, Route, createHistory } from 'svelte-navigator'
import hashHistory from './hashHistory'
import { onMount } from 'svelte'
import { getInfoToken } from '$/services/login'
import { storeSession } from '$/stores/global'
import Toast from '$/components/Toast.svelte';
import ActualizandoGtfs from '$/components/ActualizandoGtfs.svelte';
    import { getPhoto } from '$/services/personas';


let triggerEvent = false;
// @ts-ignore
const history = createHistory(hashHistory())
let routes = []
let actualizando = true

getRoutes()
    .then(data => routes = data)
    .catch(error => alert(error))

onMount(() => {
    triggerEvent && document.dispatchEvent(new Event('DOMContentLoaded'));
})

async function begin() {
    try {
        const data = await getInfoToken()
        const avatar_img = await getPhoto(data.persona.rut)
        $storeSession = { ...data, avatar_img }
    } catch (error) {
        alert(error.message || error)
        sessionStorage.clear();
        document.location.href = '/';
    }
}
begin()
</script>

<div class="wrapper">
    <Router {history} primary={false}>
        <Sidebar />

        <div class="main">
            <Navbar />

            <main class="content">
                <div class="container-fluid p-0">

                    {#if actualizando}
                        <ActualizandoGtfs on:close={() => actualizando = false} />
                    {:else}
                        {#each routes as r, index}
                            <Route path={r.path} >
                                <svelte:component this={r.component} />
                            </Route>
                        {/each}
                    {/if}
                </div>
            </main>

            <Footer />
        </div>
    </Router>
</div>

<Notifications />
<Toast />