import { search } from "./search.js";
import { pixel, percent, auto } from "./size.js";
import { position, place_top, place_left } from "./position.js";
import { sticky } from "./sticky.js";
import { loader } from "./loader.js";
import { database } from "./database.js";
import { logo } from "./logo.js";
import { chooser } from "./chooser.js";
import { workspace } from "./workspace.js";

document.addEventListener("DOMContentLoaded", async () => {
    const container = document.querySelector(".container");
    
    const parser = new loader("./database", "project.json");
    await parser.load();

    const store = new database(parser.loaded);
    
    const top_bar_builder = new sticky();
    top_bar_builder.width = new percent(100);
    top_bar_builder.height = new auto();
    top_bar_builder.position = new place_top();

    const top_bar = top_bar_builder.element;
    top_bar.className = "top-bar";
    top_bar.appendChild(document.createElement("div"));

    const search_bar = new search(store);
    top_bar.appendChild(search_bar.ui);

    const name = new logo(store.content.name);
    top_bar.appendChild(name.ui);

    const left_bar_builder = new sticky();
    left_bar_builder.width = new pixel(240);
    left_bar_builder.height = new percent(100);
    left_bar_builder.position = new place_left();

    const left_bar = left_bar_builder.element;
    left_bar.className = "left-bar";

    const center = new workspace();
    center.update(store.content.first_submission);

    const workspace_updater = (target) => {
        center.update(target);
    };

    const choose = new chooser(store, workspace_updater);
    left_bar.appendChild(choose.ui);

    container.appendChild(top_bar);
    container.appendChild(left_bar);
    container.appendChild(center.ui);
});