// ==UserScript==
// @name         Poe扩大聊天框，自动设置输入框焦点
// @name:en      Poe Enlarge chat box And auto set focus to input box.
// @name:zh-CN   Poe扩大聊天框，自动设置输入框焦点
// @namespace    http://tampermonkey.net/
// @version      0.6.3
// @description:en  1. Enlarge chat box. 2. Auto set focus to input box.
// @description:zh-CN  1. 扩大聊天框。2. 自动设置输入框焦点。
// @author       Cursor & Mason
// @match        *://poe.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=poe.com
// @grant        none
// @license      MIT
// @description 1. Enlarges the chat box. 2. Automatically moves the focus to the chat input box when the user types. 3. Sets the chatInput as the focus when the page is focused.
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    /** Function 1: Enlarges the chat box */
    
    function enlargeChatBox() {
        // Get all sections with class has prefix 'PageWithSidebarLayout_mainSection'
        const sections = document.querySelectorAll('[class^="PageWithSidebarLayout_mainSection"]');
        // Loop through each section and remove the width and max-width properties
        sections.forEach(section => {
            console.log('Processing element with class:', section.className);
            // make it important to prevent modify
            section.style.setProperty('width', 'unset', 'important');
            section.style.setProperty('max-width', 'unset', 'important');
            section.style.setProperty('min-width', '684px', 'important');
        });
    }

    // Call the function whenever needed
    enlargeChatBox();

    /** Function 2: Automatically moves the focus to the chat input box when the user types or click button. (Has Problem with Chinese Input) */

    // Find the textarea element with class starting with ChatMessageInputView_textInput
    const chatInput = document.querySelector('textarea[class^="ChatMessageInputView_textInput"]');
    console.log(chatInput); // print chatInput for debug

    // Add an event listener to the document that listens for user input
    document.addEventListener('keypress', event => {
        // If the target of the input event is the chatInput element and it does not have focus, set focus to it
        if (!chatInput.matches(':focus')) {
            chatInput.focus();
        }
    });

    // Add an event listener to the document that listens for a click event on button elements
    document.addEventListener('click', event => {
        // If the clicked element is a button and the chatInput does not have focus, set focus to it
        if (event.target.tagName === 'BUTTON' && !chatInput.matches(':focus')) {
            chatInput.focus();
        }
    });


    /** Function 3: Sets the chatInput as the focus when the page is focused. */

    // Set the chatInput as the focus when the page is loaded
    window.addEventListener('focus', () => {
        chatInput.focus();
    });

    /** Function 4: Enlarges the chat box on new pages */
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        enlargeChatBox();
                    }
                });
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();