"use strict";

const { articles_url } = require("../../../../constants");
const { loadArticles, populateArticles } = require("../../../lib/article-utils");
const objectHtmlRenderer = require("../../../lib/object-html-renderer");
const GameArticle = require("./game-article");

class GameArticles {
    constructor(props) {
        this.props = props;
        this.state = {
            articles: [],
        };
        this.id = performance.now();
        this.loadArticles();
    }

    loadArticles() {
        loadArticles(`${articles_url}games`)
            .then(articles => {
                Promise.all(
                    articles.map(async a => {
                        if (a.team_subarticles) {
                            a.team_subarticles = await populateArticles(
                                a.team_subarticles.map(sa => Object.assign(sa, { path: a.path }))
                            );
                        }
                        return a;
                    })
                ).then(completeArticles => {
                    this.state.articles = completeArticles;
                    this.refresh();
                });
            })
            .catch(e => console.log(e));
    }

    renderPlaceholder() {
        return {
            tag: "article",
            class: "placeholder",
            contents: [{ tag: "div" }, { tag: "div" }],
        };
    }

    refresh() {
        objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), {
            mode: "replace",
        });
    }

    render() {
        const { articles } = this.state;
        return {
            tag: "section",
            class: "game-articles page-contents-center",
            id: this.id,
            contents:
                articles.length > 0
                    ? articles.map(article => new GameArticle({ ...article }).render())
                    : [this.renderPlaceholder()],
        };
    }
}

module.exports = GameArticles;