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();