"use strict";
const { loadArticles } = require("../../../lib/article-utils");
const translator = require("ks-cheap-translator");
const t = translator.trad.bind(translator);
const EduArticle = require("./edu-article");

class EduArticles {
    constructor(props) {
        this.props = props;
        this.state = {
            articles: [],
            loaded: false,
        };
        this.id = "edu-articles-section";
        this.loadArticles();
    }

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

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

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

    render() {
        const { articles, loaded } = this.state;
        return {
            tag: "section",
            class: "edu-articles page-contents-center",
            id: this.id,
            contents:
                loaded && articles.length > 0
                    ? articles.map(article => new EduArticle({ ...article }).render())
                    : loaded && articles.length === 0 ? [
                        { tag: "p", contents: t("Rien de prévu pour le moment") }
                    ] : [this.renderPlaceholder()],
        };
    }
}

module.exports = EduArticles;