const moduleBase = {
    toggle() {
        this.enabled = !this.enabled;
        sendPackets.systemChat('[System]', `Toggled ${this.name}: ${this.enabled ? 'ON' : 'OFF'}`);
        this.onToggle && this.onToggle();
    },
    set(options) {
        Object.assign(this, options);
        console.log(options);
    }
};

const createModule = (name, properties) => {
    return Object.assign(Object.create(moduleBase), {
        name,
        enabled: false,
        ...properties
    });
};

window.Scripts = {
    spamChat: createModule('Chat Spam', {
        intervalId: null,
        msg: 'Skill Issue',
        delay: 1000,
        onToggle() {
            this.enabled
                ? this.intervalId = setInterval(() => sendPackets.chat(this.msg), this.delay)
                : clearInterval(this.intervalId);
        }
    }),
    singLyrics: createModule('Sing Song', {
        lyrics: [
            "Baa baa black sheep, have you any wool?",
            "Yes sir, yes sir three bags full",
            "One for my master, one for my dame",
            "One for the little boy, who lives down the lane",
        ],
        currentIndex: 0,
        intervalId: null,
        onToggle() {
            if (this.enabled) {
                this.intervalId = setInterval(() => {
                    sendPackets.chat(this.lyrics[this.currentIndex]);
                    this.currentIndex = (this.currentIndex + 1) % this.lyrics.length;
                }, 1500);
            } else {
                clearInterval(this.intervalId);
                this.currentIndex = 0;
            }
        }
    }),
    autoHealPlayer: createModule('Player AutoHeal', {
        healthThreshold: 40,
        cooldown: false,
        check() {
            if (Player.health <= this.healthThreshold && !this.cooldown) {
                sendPackets.playerHeal();
                this.cooldown = true;
                setTimeout(() => this.cooldown = false, 5000);
            }
        }
    }),
    autoHealPet: createModule('Pet AutoHeal', {
        healthThreshold: 40,
        cooldown: false,
        check() {
            if (Player.pet.health <= this.healthThreshold && !this.cooldown) {
                sendPackets.petHeal();
                this.cooldown = true;
                setTimeout(() => this.cooldown = false, 5000);
            }
        }
    }),
    autoRevivePet: createModule('Pet AutoRevive', {
        cooldown: false,
        check() {
            if (Player.pet.isDead && !this.cooldown) {
                sendPackets.petRevive();
                this.cooldown = true;
                setTimeout(() => this.cooldown = false, 5000);
            }
        }
    }),
    zoom: createModule('Zoom', {
        // Something
    })
};

const guiBase = {
    createButton(text, onClick) {
        const button = document.createElement('button');
        button.innerText = text;
        button.addEventListener('click', onClick);
        return button;
    },

    createInput(label, type, onChange) {
        const container = document.createElement('div');
        const input = document.createElement('input');
        input.type = type;
        input.addEventListener('change', onChange);

        const labelElement = document.createElement('label');
        labelElement.innerText = label;
        labelElement.appendChild(input);

        container.appendChild(labelElement);
        return container;
    }
};

const gui = {
    opened: false,
    init() {
        this.container = document.createElement('div');
        this.container.style.position = 'fixed';
        this.container.style.top = '10px';
        this.container.style.right = '10px';
        document.body.appendChild(this.container);

        this.buildScriptsGUI();
    },

    buildScriptsGUI() {
        for (const scriptName in Scripts) {
            const script = Scripts[scriptName];

            const scriptContainer = document.createElement('div');
            scriptContainer.style.marginBottom = '10px';

            const scriptHeader = document.createElement('h3');
            scriptHeader.innerText = script.name;
            scriptContainer.appendChild(scriptHeader);

            const toggleButton = guiBase.createButton('Toggle', () => this.openSettingsGUI(script));
            scriptContainer.appendChild(toggleButton);

            this.container.appendChild(scriptContainer);
        }
    },

    openSettingsGUI(script) {
        if (this.open) return;
    
        const settingsGUI = document.createElement('div');
        settingsGUI.style.backgroundColor = '#f8f8f8';
        settingsGUI.style.borderRadius = '8px';
        settingsGUI.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.1)';
        settingsGUI.style.padding = '20px';
        settingsGUI.style.position = 'fixed';
        settingsGUI.style.top = '50%';
        settingsGUI.style.left = '50%';
        settingsGUI.style.transform = 'translate(-50%, -50%)';
        settingsGUI.style.maxWidth = '400px';
    
        const header = document.createElement('h2');
        header.textContent = script.name;
        header.style.fontSize = '20px';
        header.style.marginBottom = '10px';
        settingsGUI.appendChild(header);
    
        const excludedOptions = ['name', 'cooldown', 'intervalId'];
    
        for (const option in script) {
            if (typeof script[option] === 'function' || excludedOptions.includes(option)) {
                continue;
            }
    
            const inputType = typeof script[option] === 'boolean' ? 'checkbox' : 'text';
            const input = guiBase.createInput(option, inputType, (e) => this.handleOptionChange(script, option, e));
            input.style.marginBottom = '10px';
            input.style.width = '100%';
            input.style.padding = '8px';
            input.style.border = '1px solid #ddd';
            input.style.borderRadius = '4px';
    
            if (typeof script[option] === 'boolean') {
                input.style.display = 'block';
                input.style.marginTop = '5px';
            }
    
            settingsGUI.appendChild(input);
        }
    
        const closeButton = guiBase.createButton('Close', () => this.closeSettingsGUI(settingsGUI));
        closeButton.style.backgroundColor = '#3498db';
        closeButton.style.color = '#fff';
        closeButton.style.border = 'none';
        closeButton.style.padding = '8px 12px';
        closeButton.style.cursor = 'pointer';
        closeButton.style.fontSize = '16px';
        closeButton.style.borderRadius = '4px';
        settingsGUI.appendChild(closeButton);
    
        document.body.appendChild(settingsGUI);
        this.open = true;
    },

    handleOptionChange(script, option, event) {
        const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
        script.set({ [option]: value });
    },

    closeSettingsGUI(settingsGUI) {
        document.body.removeChild(settingsGUI);
        this.open = false;
    }
};

gui.init();

Analyze this code, is there a way we can make it more modulated to help extend maintainibility and functionality, and what can be improved?