"use strict";

const { articles_url } = require("../../../../constants");
const ImageCarousel = require("../../../generic-components/image-carousel");
const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
const objectHtmlRenderer = require("../../../lib/object-html-renderer");

class SoftwareArticle {
    constructor(props) {
        this.props = props;
    }

    render() {
        const { title, date, body, subtitle, images, path, technical } = this.props;
        return {
            tag: "article",
            class: "software-article",
            contents: [
                {
                    tag: "h2",
                    class: "software-title",
                    contents: title,
                },
                {
                    tag: "time",
                    class: "software-date",
                    contents: getArticleDate(date),
                },
                {
                    tag: "h3",
                    class: "software-subtitle",
                    contents: subtitle,
                },
                {
                    tag: "div",
                    class: "software-description",
                    contents: getArticleBody(body),
                },
                new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(),
                {
                    tag: "div",
                    class: "software-technical",
                    contents: [
                        {
                            tag: "h2",
                            contents: "Details",
                        },
                        {
                            tag: "ul",
                            class: "technical-details",
                            contents: [
                                {
                                    tag: "li",
                                    class: "detail",
                                    contents: [
                                        { tag: "label", contents: "Stack" },
                                        {
                                            tag: "div",
                                            contents: [
                                                {
                                                    tag: "ul",
                                                    contents: technical.stack.map(tech => {
                                                        return { tag: "li", contents: tech };
                                                    }),
                                                },
                                            ],
                                        },
                                    ],
                                },
                                {
                                    tag: "li",
                                    class: "detail",
                                    contents: [
                                        { tag: "label", contents: "Version actuelle" },
                                        {
                                            tag: "div",
                                            contents: technical.version,
                                        },
                                    ],
                                },
                                {
                                    tag: "li",
                                    class: "detail",
                                    contents: [
                                        { tag: "label", contents: "License" },
                                        { tag: "div", contents: technical.license },
                                    ],
                                },
                                {
                                    tag: "li",
                                    class: "detail",
                                    contents: [
                                        {
                                            tag: "label",
                                            contents: [
                                                {
                                                    tag: "a",
                                                    href: technical.repository,
                                                    target: "_blank",
                                                    contents: "Dépôt code source",
                                                },
                                            ],
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}

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

    loadArticles() {
        loadArticles(`${articles_url}software`)
            .then(articles => {
                this.state.articles = articles;
                this.refresh();
                this.fixScroll();
            })
            .catch(e => console.log(e));
    }

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

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

    fixScroll() {
        if (window.location.href.includes("#")) {
            window.scrollTo(
                0,
                document.getElementById(window.location.href.match(/#.+/)[0].replace("#", ""))
                    .offsetTop
            );
        }
    }

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

module.exports = SoftwareArticles;