import page from "//unpkg.com/page/page.mjs"
import {
html,
render
} from 'https://unpkg.com/lit-html?module';
import {
displayCatalog
} from "./catalog.js"
import {
createItem
} from "./create.js";
import {
loginF
} from "./login.js"
import {
registerF
} from "./register.js"
import {
showDetails
} from "./details.js"
import {
getMyFurniture
} from "./myFurniture.js"

function connector() {

page('/',loadData, displayCatalog);
page('/index.html',loadData, displayCatalog);
page('/login', loginF);
page('/register', registerF);
page('/create', createItem);
page('/details/:id', loadData, showDetails);
page('/my-furniture', getMyFurniture);

page.start();


function setNavigation() {
let nav = document.getElementsByTagName('nav')[0];
let logedUser = sessionStorage.getItem("userId");

function navigationTemplate() {
return html `
<a id="catalogLink" href="index.html" class="active">Dashboard</a>
${logedUser ? html`<div id="user">
<a id="createLink" href="/create" >Create Furniture</a>
<a id="profileLink" href="/my-furniture" >My Publications</a>
<a id="logoutBtn" @click=${logOut} href="javascript:void(0)">Logout</a>
</div>`: html`<div id="guest">
<a id="loginLink" href="/login">Login</a>
<a id="registerLink" href="/register">Register</a>
</div>`}
`
}
render(navigationTemplate(), nav)
}
setNavigation();

function loadData(context, next) {
setNavigation();
next();
}
async function logOut() {
let response = await fetch("http://localhost:3030/user/logout");
let result = await response.json();
console.log("result is eeeeemptyyy");
sessionStorage.clear();
setNavigation();
page.redirect('/')

}

}

connector();