class Connection {
    connectionTries = 0
    ws;
    linkCreated;
    wsStatus;

    constructor() {
        this.init()
    }
    
    init() {
        if(window.location.hostname === "localhost") {
            this.ws = new WebSocket("ws://" + "localhost:3003")
        } else {
            this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
        }
        this.ws.addEventListener('open', () => {
            this.connectionTries = 0
            console.log("Websocket connection established.");
            this.ws.addEventListener('message', this.onMessage)
        });
        this.ws.addEventListener("close", () => {
            this.checkOpen();
            console.log('Websocket Closed')
        })
    }

    onMessage = (event) => {
        let message =  event.data;
        let messageSplit = message.split('|');

        switch(messageSplit[0]) {
            case 'connected':
                Forms.connected(messageSplit[1], messageSplit[2])
                break;
            case 'disconnected': 
                Forms.disconnected(messageSplit[1])
                break;
            case 'UPDATE-SIZE':
                updateFileSize(messageSplit[1], messageSplit[2]);
                break;
            case 'URL-TITLE-RESPONSE':
                this.updateLinkTitle(messageSplit[1]);
                break;
            default:
                console.log('Websocket message:', message);
                break;
        }
        

        if (messageSplit[1] == 'CSS-LINK') {
            this.createCSSLink(message);
        }
    }
    
    async checkOpen() {
        if (this.ws.readyState === WebSocket.OPEN) {
            return true
        } else {
            await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
            this.connectionTries++
            console.log('Reestablishing connection')
            this.init()
        }
    }

    sleep = (time) => {
        return new Promise(resolve => {
            setTimeout(resolve, time);
        });
    }
    
    sendMessage = (msg) => {
        if (this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(msg);
        }
        else {
            console.log('No websocket connection: Cannot send message');
        }
    }
    
    updateCSS = async (updateStyle, newValue) => {
        let currentSpace = window.wrapper.getAttribute("name").replace(/ /g,'%20')
        let currentFolder = window.location.pathname;
        //create the inital link
        this.linkCreated = false;
        let cssIncomingText = ""
        Array.from(document.styleSheets).forEach(el => {
            if(el?.href?.includes?.(`.${currentSpace}.css`)) {
                this.linkCreated = true;

            }
        })
        let currentSpaceDataAttr = window.wrapper.getAttribute("name");
        let cssInit = `parchment-page[name="${currentSpaceDataAttr}"] {background-color: #e9c9a0;} parchment-page[name="${currentSpaceDataAttr}"] > p.text {font-family: ${newValue};} parchment-page[name="${currentSpaceDataAttr}"] > file-::before,  parchment-page[name="${currentSpaceDataAttr}"] > image-::before,  parchment-page[name="${currentSpaceDataAttr}"] > parchment-page::before {font-family: ${newValue};font-weight: 400;} parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > file-::before, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > *, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > image-::before ,parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > parchment-page::before, parchment-page[name="${currentSpaceDataAttr}"] > a,  parchment-page[name="${currentSpaceDataAttr}"] > input-box  {font-family: ${newValue}; font-weight: 400;}`
        cssIncomingText += cssInit
        
        let CSSRawData = `REQUEST|update-css|${currentFolder}|${cssIncomingText}|`
        await this.checkOpen()
        this.ws.send(CSSRawData)
    }
    
    createCSSLink = (wsMessage) => {
        let retrieveHref = wsMessage;
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.id = window.wrapper.getAttribute('name')+"-css"
        link.href = retrieveHref;
        
        let retrieveStyleLinks = document.querySelectorAll(`[href='${retrieveHref}']`);
        if (retrieveStyleLinks[0] !== undefined) {
            retrieveStyleLinks[0].remove();
        }
        window.wrapper.prepend(link);
    }

    scrapeExternalHTMLTitle = async (href) => {
        let req = `REQUEST|scrape-title|${href}|`
        await this.checkOpen()
        this.ws.send(req)
    }

    updateLinkTitle = (title) => {
        let link = document.querySelectorAll('.convert-to-title')[0]
        if (title !=="") {
            link.innerHTML += title;
        } else {
            link.innerHTML += link.getAttribute('href')
        }
        link.classList.remove('convert-to-title')
    }
}

export default Connection