router

import { views, compileTemplate } from './views.js';
import { auth, db } from './services.js';

// Routing
const router = () => {
  // get main element
  const app = document.getElementById('app');

  // register partials
  Handlebars.registerPartial(
    'header',
    compileTemplate('header-template', auth.getData())
  );
  Handlebars.registerPartial('footer', compileTemplate('footer-template'));

  // declare routes
  const routesArr = [
    {
      path: '/',
      render: views.home,
    },
    {
      path: '/register',
      render: views.register,
    },
    {
      path: '/login',
      render: views.login,
    },
    {
      path: '/create',
      render: views.create,
    },
  ];

  let view = routesArr.find((route) => route.path == location.pathname);
  if (!view)
    view = {
      path: '/',
      render: views.home,
    };

  app.innerHTML = view.render();
};

// Navigator
function navigateTo(path) {
  history.pushState(null, null, path);
  router();
}

// Initialize app function
function initApp() {
  console.log('content loaded');
  // add event listeners to the nav links
  document.body.addEventListener('click', async (e) => {
    if (e.target.matches('[data-link]')) {
      e.preventDefault();

      // logo case
      if (e.target.nodeName == 'IMG') {
        // target link wrapping the logo
        navigateTo(e.target.parentElement.href);
        return;
      }

      navigateTo(e.target.href);
    }

    if (e.target.matches('#login-btn')) {
      e.preventDefault();
      let loginForm = new FormData(document.forms.login);
      let email = loginForm.get('email');
      let password = loginForm.get('password');

      let signedIn = await auth.signIn(email, password);

      if (signedIn) {
        navigateTo('/');
      }

      return;
    }

    if (e.target.matches('#register-btn')) {
      e.preventDefault();
      let loginForm = new FormData(document.forms.register);
      let email = loginForm.get('email');
      let password = loginForm.get('password');
      let passConfirmation = loginForm.get('password-confirm');
      let registered = await auth.signUp(email, password, passConfirmation);

      if (registered) {
        navigateTo('/');
      }

      return;
    }

    if (e.target.matches('#logout-btn')) {
      e.preventDefault();
      localStorage.removeItem('auth');

      navigateTo('/login');
      return;
    }

    if (e.target.matches('#create-btn')) {
      e.preventDefault();
      let createForm = new FormData(document.forms.create);

      let name = createForm.get('name');
      let price = createForm.get('price');
      let img = createForm.get('img');
      let description = createForm.get('description');
      let brand = createForm.get('brand');

      const shoeObj = {
        name,
        price,
        img,
        description,
        brand,
      };

      db.postData('shoes', shoeObj);

      console.log(shoeObj);
      return;
    }
  });

  // init
  router();
}

// dom content loaded
document.addEventListener('DOMContentLoaded', initApp);
// add event listener to the history
window.addEventListener('popstate', router);