(function () {
    const RegistryApp = (window.RegistryApp = window.RegistryApp || {});
    const { h } = RegistryApp.runtime;
    const store = RegistryApp.store;

    RegistryApp.components = RegistryApp.components || {};

    RegistryApp.components.App = function App() {
        const Navbar = RegistryApp.componentFns.Navbar;
        const Header = RegistryApp.componentFns.Header;
        const HomeView = RegistryApp.componentFns.HomeView;
        const LoginForm = RegistryApp.componentFns.LoginForm;
        const CreateOrgForm = RegistryApp.componentFns.CreateOrgForm;
        const Footer = RegistryApp.componentFns.Footer;
        const PortalApp =
            window.OrgPortal && window.OrgPortal.components
                ? window.OrgPortal.components.App
                : null;

        const view = store.getView();

        if (view === "portal" && PortalApp) {
            return h("div", null, Navbar(), PortalApp());
        }

        let mainContent;
        if (view === "home") {
            mainContent = HomeView();
        } else if (view === "login") {
            mainContent = LoginForm();
        } else if (view === "create") {
            mainContent = CreateOrgForm();
        }

        return h(
            "main",
            null,
            Navbar(),
            h(
                "div",
                { className: "container" },
                Header({ title: "Global Organization Network" }),
                mainContent,
            ),
            Footer(),
        );
    };
})();