import { search } from "./search.js";
import { pixel, percent, auto } from "./size.js";
import { position, place_top } from "./position.js";
import { sticky } from "./sticky.js";
import { loader } from "./loader.js";
import { database } from "./database.js";
import { logo } from "./logo.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);

    container.appendChild(top_bar);
});