"use strict";

const { loadArticles } = require("../../../lib/article-utils");
const GameArticle = require("./game-article");
const translator = require("ks-cheap-translator");

class GameArticles {
    constructor(props) {
        this.props = props;
        this.state = {
            articles: [],
        };
        this.id = "game-articles-section";
        this.loadArticles();
    }

    loadArticles() {
        loadArticles("games", translator.locale)
            .then(articles => {
                this.state.articles = articles;
                this.refresh();
            })
            .catch(e => console.log(e));
    }

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

    refresh() {
        obj2htm.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;