"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",
            typeof: "Person",
            property: "author",
            contents: [
                {
                    tag: "div",
                    class: "team-member-img",
                    contents: [
                        {
                            tag: "img",
                            alt: `ìmage team member ${title}`,
                            src: images.map(im => `${path}/images/${im}`)[0],
                            property: "image",
                        },
                    ],
                },
                {
                    tag: "h3",
                    class: "team-member-title",
                    contents: title,
                    property: "name",
                },
                {
                    tag: "strong",
                    class: "team-member-subtitle",
                    contents: subtitle,
                    property: "jobTitle",
                },
                {
                    tag: "p",
                    class: "team-member-body",
                    contents: getArticleBody(body),
                    property: "description",
                },
            ],
        };
    }
}

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

    render() {
        const {
            title,
            tags,
            body,
            subtitle,
            images,
            path,
            team_subarticles,
            image_banner,
        } = this.props;
        return {
            tag: "article",
            typeof: "VideoGame",
            additionalType: "Article",
            class: "game-article",
            contents: [
                {
                    tag: "h2",
                    property: "name",
                    class: "game-title",
                    contents: title,
                },
                {
                    tag: "div",
                    class: "game-banner",
                    contents: [
                        { tag: "img", class: "pixelated", src: `${path}/images/${image_banner}` },
                    ],
                },
                {
                    tag: "div",
                    class: "game-tags",
                    contents: tags.map(tag => {
                        return { tag: "span", contents: tag, property: "about" };
                    }),
                },
                {
                    tag: "h3",
                    class: "game-subtitle",
                    contents: subtitle,
                    property: "alternativeHeadline",
                },
                {
                    tag: "div",
                    class: "game-description",
                    property: "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;