import { ApiEndpoint } from "./apiendpoint";
import { generatePostHtml } from "./posts";

import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import Link from "@editorjs/link";
import Quote from "@editorjs/quote";
import SimpleImage from "@editorjs/simple-image"
import Embed from "@editorjs/embed";


const editor = new EditorJS({
  /**
   * Id of Element that should contain the Editor
   */
  holder: "editorjs",

  /**
   * Available Tools list.
   * Pass Tool's class or Settings object for each Tool you want to use
   */
  tools: {
    header: Header,
    list: List,
    quote: Quote,
    link: Link,
    image: SimpleImage,
    embed: Embed
  },
});


const postApiEndpoint = new ApiEndpoint("posts");
const userApiEndpoint = new ApiEndpoint("users");

document.addEventListener("DOMContentLoaded", loadPosts);

async function loadPosts() {
    const posts = await postApiEndpoint.getObjects();
    const center = document.getElementsByClassName("posts-wrapper")[0];
    center.innerHTML = "";
    for (let i = 0; i < posts.length; i++) {
        const post = posts[i];
        const postOwner = await userApiEndpoint.getObject(post.userId);
        for (let j = 0; j < 3; j++)
            center.innerHTML += generatePostHtml(post, postOwner);
    }
}