"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Menu = exports.MenuCategoryItem = exports.MenuItemRender = exports.changePage = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Menu_1 = require("../Menu");
const WhiteLogoIcon_1 = require("../Icon/WhiteLogoIcon");
const UIDropdownMenu_1 = require("../BuildlingBlocks/UIDropdownMenu");
const UIConstant_1 = require("./UIConstant");
const changePage = (category, page) => {
    let querys = [`category=${category}`];
    if (page) {
        querys.push(`page=${page}`);
    }
    window.location.assign(`?${querys.join("&")}`);
};
exports.changePage = changePage;
const MenuItemRender = ({ item, category }) => {
    return ((0, jsx_runtime_1.jsx)(StyledNavItem, { onClick: !!item.ui ? () => (0, exports.changePage)(category.name, item.name) : undefined, children: item.name }, item.name));
};
exports.MenuItemRender = MenuItemRender;
const MenuCategoryItem = ({ item }) => {
    return ((0, jsx_runtime_1.jsx)(UIDropdownMenu_1.UIDropdownMenu, { title: item.name, items: item.items.map((mItem) => ({
            renderUI: () => (0, jsx_runtime_1.jsx)(exports.MenuItemRender, { item: mItem, category: item }),
        })), ahchorOrigin: {
            vertical: "top",
            horizontal: "right",
        }, transformOrigin: {
            vertical: "top",
            horizontal: "left",
        }, direction: "right" }, item.name));
};
exports.MenuCategoryItem = MenuCategoryItem;
const Menu = ({ items }) => {
    let updatedItems = {};
    items.forEach((item) => {
        if (!updatedItems[item.name]) {
            updatedItems[item.name] = new Menu_1.MenuColumn(item.name, [...item.categories], item.color, item.icon, item.description);
        }
        else {
            for (let cat of item.categories) {
                if (!updatedItems[item.name].categories.includes(cat)) {
                    updatedItems[item.name].categories.push(cat);
                }
            }
        }
    });
    return ((0, jsx_runtime_1.jsxs)(NavigationWrapper, { children: [(0, jsx_runtime_1.jsx)(Logo, { onClick: () => {
                    window.location.href = "/";
                }, children: (0, jsx_runtime_1.jsx)(WhiteLogoIcon_1.WhiteLogoIcon, {}) }), Object.values(updatedItems).map((menuItem) => {
                return ((0, jsx_runtime_1.jsx)(UIDropdownMenu_1.UIDropdownMenu, { title: menuItem.name, items: menuItem.categories.map((item) => ({
                        renderUI: () => item instanceof Menu_1.MenuCategory ? ((0, jsx_runtime_1.jsx)(exports.MenuCategoryItem, { item: item })) : ((0, jsx_runtime_1.jsx)(exports.MenuItemRender, { item: item, category: menuItem })),
                    })) }, menuItem.name));
            }), (0, jsx_runtime_1.jsx)(ContactUsButton, { href: "mailto:carl@appglue.com", children: "Contact Us" })] }));
};
exports.Menu = Menu;
const NavigationWrapper = styled_components_1.default.div `
    display: flex;
    background: #434d6b;
    padding: 4px 16px;
    align-items: center;
`;
const Logo = styled_components_1.default.div `
    margin-right: 12px;

    cursor: pointer;
`;
const ContactUsButton = styled_components_1.default.a `
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: center;

    text-decoration: none;

    padding: 7px 13px;

    border: 1px solid #ffffff;
    box-sizing: border-box;
    border-radius: 4px;

    margin-left: auto;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
`;
const StyledNavItem = styled_components_1.default.div `
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;

    padding: 8px;

    cursor: pointer;

    color: ${(props) => (props.selected ? UIConstant_1.UIConstant.primary_text_color : UIConstant_1.UIConstant.main_text_color)};
`;
//# sourceMappingURL=Menu.js.map