import { initUpload } from './upload.js';
import { initDressUp } from './dressup.js';
import { initManage } from './manage.js';
import { initDiag, tagOp } from './diag.js';

const screens = ['dressup-screen', 'upload-screen', 'manage-screen'];

function showScreen(id) {
  screens.forEach(s => {
    document.getElementById(s).style.display = s === id ? '' : 'none';
  });
}

function route() {
  const hash = location.hash || '#/';
  tagOp(`route: ${hash}`);

  if (hash.startsWith('#/upload')) {
    showScreen('upload-screen');
    initUpload();
  } else if (hash.startsWith('#/manage')) {
    showScreen('manage-screen');
    initManage();
  } else {
    showScreen('dressup-screen');
    initDressUp();
  }
}

export function navigate(hash) {
  location.hash = hash;
}

window.addEventListener('hashchange', route);
window.addEventListener('DOMContentLoaded', () => {
  initDiag();
  route();
});