window.modules.register("AuthPromptRoute", () => {
    class AuthPromptRoute {
        constructor() {
            this.element = null;
        }
    
        mountOn(target) {
            if (this.element)
                return; // Already mounted
            
            this.element = document.createRange().createContextualFragment(`
                <div>
                    <input type="password" id="code-input">
                    <button id="continue-button">enter</button>
                </div>
            `).children[0];
    
            this.element.querySelector("#continue-button").addEventListener("click", () => {
                if (this.onPasswordSubmitted)
                    this.onPasswordSubmitted(this.element.querySelector("#code-input").value);
            });
    
            target.appendChild(this.element);
        }
    
        unmount() {
            if (!this.element)
                return; // Already unmounted
            this.element.parentElement.removeChild(this.element);
            this.element = null;
        }
    }

    return AuthPromptRoute;
});

window.modules.register("MainChatView", () => {
    class MainChatView {
        constructor() {
            this.element = null;
        }
    
        mountOn(target) {
            if (this.element)
                return; // Already mounted
            
            this.element = document.createRange().createContextualFragment(`
                <div>
                    <div id="messages-container" style="width: 300px; height: 250px; overflow: auto;"></div>
                    <br>
                    <input type="text" id="message-input">
                    <button id="message-submit">send</button>
                </div>
            `).children[0];
    
            const textInput = this.element.querySelector("#message-input");
            this.element.querySelector("#message-submit").addEventListener("click", () => {
                const message = textInput.value;
                if (this.onSendMessage)
                    this.onSendMessage(message);

                textInput.value = "";
            });
    
            target.appendChild(this.element);
        }

        appendMessage(messageObject) {
            const { author, content } = messageObject;
            if (!this.element)
                return;

            const usernameLetters = author.username
                .split("");
            let authorUsernameNumber = 150;
            usernameLetters.forEach(l => {
                authorUsernameNumber += l.charCodeAt(0);
            });

            const messageElement = document.createRange().createContextualFragment(`
                <div>
                    <b>[author could not be loaded] </b>
                    <span>[content could not be loaded]</span>
                </div>
            `).children[0];

            messageElement.querySelector("b").innerText = `User ${authorUsernameNumber} `;
            messageElement.querySelector("span").innerText = content;

            const container = this.element.querySelector("#messages-container");
            container.appendChild(messageElement);
            container.scrollTop = container.scrollHeight;
        }
    
        unmount() {
            if (!this.element)
                return; // Already unmounted
            this.element.parentElement.removeChild(this.element);
            this.element = null;
        }
    }

    return MainChatView;
});


window.modules.register("App", () => {
    const AuthPromptRoute = window.modules.require("AuthPromptRoute");
    const MainChatView = window.modules.require("MainChatView");
    const GatewayClient = window.modules.require("GatewayClient");


    class App {
        constructor(mountElement) {
            this.mountElement = mountElement;
            this.currentMountedElement = null;

            this.authPromptRoute = new AuthPromptRoute();
            this.mainChatView = new MainChatView();
            this.gatewayClient = new GatewayClient(window._APP_ENV.gatewayBase);
        }

        _mountElement(element) {
            if (this.currentMountedElement) {
                this.currentMountedElement.unmount();
            }
            this.currentMountedElement = element;
            this.currentMountedElement.mountOn(this.mountElement);
        }

        _unmountAll() {
            if (this.currentMountedElement) {
                this.currentMountedElement.unmount();
            }
        }

        mount() {
            let serverId;
            let channelId;
            let token;

            this._mountElement(this.authPromptRoute);

            this.gatewayClient.onEvent = (e) => {
                if (e.eventType === "MESSAGE_CREATE" && e.message && e.message.guild_id === serverId && e.message.channel_id === channelId) {
                    this.mainChatView.appendMessage(e.message);
                }
            };
            this.gatewayClient.onConnected = () => {
                this._mountElement(this.mainChatView);
            };
            this.gatewayClient.onDisconnected = () => {
                this._mountElement(this.authPromptRoute);
            };
            this.authPromptRoute.onPasswordSubmitted = (auth) => {
                const parts = auth.split(",,");
                if (parts.length !== 3)
                    return;

                const [userToken, userServerId, userChannelId] = parts;
                serverId = userServerId;
                channelId = userChannelId;
                token = userToken
                this.gatewayClient.connect(token);
            };
            this.mainChatView.onSendMessage = async (message) => {
                if (typeof message === "string" && message.trim() === "")
                    return;

                await fetch(`${window._APP_ENV.apiBase}/guilds/${serverId}/channels/${channelId}/messages/create`, {
                    method: "POST",
                    body: JSON.stringify({
                        content: message
                    }),
                    headers: {
                        "content-type": "application/json",
                        "authorization": token
                    }
                });
            };
        }
    }

    return App;
});