import { EventEmitter } from "events";
import { PonyTownMessage } from "./PonyTownMessage";
//const MutationObserver = require('mutation-observer');

export class PonyTownObserver extends EventEmitter {

    private chatLog = false;
    private ponyBox = false
    private ponyBoxRect: any = null;
    private currentMessage: HTMLElement = null;
    private eventListinerAddToButton = false;

    constructor() {
        super();

        let chatlogObserver = new ChatlogObserver((_li, _o) => {
            this.newMsg();
        });
        console.log('test1');
        let gameStartObserver = new GameStartObserver((_li, _o) => {
            console.log('test2');
            //eventListinerAddToButton
            if (!this.eventListinerAddToButton) {
                if (document.querySelector('.btn-success')) {
                    let button = <HTMLButtonElement>document.querySelector('.btn-success');
                    if (button) {
                        button.addEventListener('click', () => {
                            let namebox = <HTMLInputElement>document.querySelector('.form-control');
                            if (namebox) {
                                this.emit('selectedName', namebox.value.trim());
                            }
                        });
                        this.eventListinerAddToButton = true;
                    }
                }
            }
            console.log("This message never appeared on firefox");
            if (document.querySelector(".pony-box-rect")) {
                //if pone box appear
                let name = document.querySelector(".pony-box-name").textContent;

                let socialMedia = null;
                let socialMediaUrl = null;
                let socialMediaHtml = document.querySelector('.site-info')

                if (socialMediaHtml) {
                    socialMedia = socialMediaHtml.textContent;
                    //@ts-ignore
                    socialMediaUrl = socialMediaHtml.href;
                }

                let obj = {
                    name: name,
                    socialMediaName: socialMedia,
                    socialMediaUrl: socialMediaUrl
                }

                if (!this.ponyBox) this.emit('ponyInfoBoxCreate', obj);
                if (this.ponyBoxRect !== socialMediaHtml) {
                    this.ponyBoxRect = socialMediaHtml;
                    this.emit('ponyInfoBoxUpdate', obj);
                }
                this.ponyBox = true;
            }
            else {
                if (this.ponyBox) this.emit('ponyInfoBoxDestroy')
                this.ponyBoxRect = null;
                this.ponyBox = false;
            }
            console.log('tesasdt');
            if (document.querySelector(".chat-log-scroll-inner-inner")) {

                if (!this.chatLog) this.emit('chatlogCreate');
                this.chatLog = true;

                // The chatlog exists, we can observe it
                chatlogObserver.observe();

            } else {
                // The chatlog no longer exist, we'd better stop watching it
                // I'm not sure that anything bad would happen if we didn't, but
                // I hate having to guess where a bug comes from

                chatlogObserver.disconnect();
                if (this.chatLog) this.emit('chatlogDestory');
                this.chatLog = false;
            }
        });
        gameStartObserver.observe();
    }

    //Complicated function
    public newMsg() {

        let messages = document.getElementsByClassName('chat-line') as HTMLCollectionOf<HTMLDivElement>;
        if (!messages) return;
        // We have to find last message because sometimes there can
        // appear two or more messages which can lead us to message skipping.

        //Using revers loop becuse that how message system works. get index of last
        //message that was send

        //if currentMessage is not defiend we read full chatlog
        if (this.currentMessage === null) return this.getMessagesFromPos(messages, 0);
        if (this.currentMessage === messages[messages.length - 1]) return;
        for (let i = messages.length - 1; i >= 0; i--) {

            //searching for last message if found reverse loop
            if (this.currentMessage === messages[i]) {
                if (!messages[i + 1]) return this.getMessagesFromPos(messages, 0);
                if (!messages[i + 1]) return;
                return this.getMessagesFromPos(messages, i + 1);
            }
        }
        //if not found we read all messages
        return this.getMessagesFromPos(messages, 0);
    }

    //get messages from position
    private getMessagesFromPos(messages: HTMLCollectionOf<HTMLDivElement>, position: number) {
        for (let i = position; i < messages.length; i++) {
            this.newMessage(messages[i]);
        }
    }

    //messages
    private newMessage(message: HTMLDivElement) {
        //saves last message
        this.currentMessage = message;
        this.emit('newMessage', new PonyTownMessage(message));
    }
}



/**
 * ChatlogObserver
 *
 * Observe the chatlog. If the chatlog changes, update the observed chatlog when
 * .observe() is called
 */
class ChatlogObserver extends MutationObserver {
    chatContainer: Element;

    observe() {
        let chatContainer = document.querySelector(".chat-log-scroll-inner-inner");
        if (this.chatContainer === chatContainer) return;
        this.chatContainer = chatContainer;
        //Detect chatlog
        super.observe(chatContainer, {
            childList: true
        });
    }
    disconnect() {
        super.disconnect();
        this.chatContainer = null;
    }
}

class GameStartObserver extends MutationObserver {

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