"use strict";

const { images_url } = require("../../constants");

const NAV_MENU_ITEMS = [
    ["/public/", "logo_kuadrado_s32.png; "],
    ["/public/games/", "Jeux"],
    ["/public/software-development/", "Software"],
    [
        "/public/education/",
        "Pédagogie",
        [
            // submenu
            ["/public/education/#game-studio-club", "Game Studio Club"],
            ["/public/education/#popularization", "Animations vulgarisation"],
        ],
    ],
];

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

    renderMenu(menuItemsArray, isSubmenu = false) {
        const r = {
            tag: "ul",
            class: isSubmenu ? "submenu" : "",
            contents: menuItemsArray.map(link => {
                let [href, text, submenu] = link;
                const spltTxt = text.split(";");
                text = spltTxt.length > 1 ? spltTxt[1] : text;
                const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
                return {
                    tag: "li",
                    class: !isSubmenu && window.location.pathname === href ? "active" : "",
                    contents: [
                        {
                            tag: "a",
                            href,
                            contents: img
                                ? [
                                      { tag: "img", src: `${images_url}/${img}` },
                                      { tag: "span", contents: text },
                                  ]
                                : text,
                        },
                    ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
                };
            }),
        };
        return r;
    }

    render() {
        return {
            tag: "main",
            contents: [
                {
                    tag: "header",
                    contents: [
                        {
                            tag: "nav",
                            contents: [this.renderMenu(NAV_MENU_ITEMS)],
                        },
                    ],
                },
                {
                    tag: "div",
                    id: "page-container",
                    contents: [this.props.page.render()],
                },
                {
                    tag: "footer",
                    contents: [
                        {
                            tag: "a",
                            href: "mailto:kuadrado-software@tutanota.com",
                            contents: "kuadrado-software@tutanota.com",
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = Template;