"use strict";

const ImageCarousel = require("../../../generic-components/image-carousel");
const { getArticleBody } = require("../../../lib/article-utils");

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

    render() {
        const { title, subtitle, body, images, path } = this.props;
        return {
            tag: "div",
            class: "team-member",
            contents: [
                {
                    tag: "div",
                    class: "team-member-img",
                    contents: [
                        {
                            tag: "img",
                            alt: `ìmage team member ${title}`,
                            src: images.map(im => `${path}/images/${im}`)[0],
                        },
                    ],
                },
                {
                    tag: "h3",
                    class: "team-member-title",
                    contents: title,
                },
                {
                    tag: "strong",
                    class: "team-member-subtitle",
                    contents: subtitle,
                },
                {
                    tag: "p",
                    class: "team-member-body",
                    contents: getArticleBody(body),
                },
            ],
        };
    }
}

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

    render() {
        const { title, tags, body, subtitle, images, path, team_subarticles } = this.props;
        return {
            tag: "article",
            class: "game-article",
            contents: [
                {
                    tag: "h2",
                    class: "game-title",
                    contents: title,
                },
                {
                    tag: "div",
                    class: "game-tags",
                    contents: tags.map(tag => {
                        return { tag: "span", contents: tag };
                    }),
                },
                {
                    tag: "h3",
                    class: "game-subtitle",
                    contents: subtitle,
                },
                {
                    tag: "div",
                    class: "game-description",
                    contents: getArticleBody(body),
                },
                new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(),
                {
                    tag: "div",
                    class: "game-team",
                    contents: [
                        {
                            tag: "h2",
                            contents: "L'équipe",
                        },
                        {
                            tag: "div",
                            class: "team-members",
                            contents: team_subarticles.map(tsa =>
                                new TeamMember({ ...tsa }).render()
                            ),
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = GameArticle;