import { Terminal } from 'xterm';
import { AttachAddon } from 'xterm-addon-attach';
import { FitAddon } from 'xterm-addon-fit';

window.customElements.define('console-component', class extends HTMLElement {
    constructor(host, server, token) {
        super();
        this.shadow = this.attachShadow({mode: 'open'});
        this.render();
        this.term = new Terminal();
        const fitAddon = new FitAddon();
        this.term.loadAddon(fitAddon);
        fitAddon.fit();
        term.open(document.getElementById('terminal'));
        this.connect();

    }

    connect() {
        this.socket = new WebSocket(`wss://${host}/server/${server}/logs?token=${token}`);
        const attachAddon = new AttachAddon(socket);
        term.loadAddon(attachAddon);
    }
    render() {
        this.shadow.innerHTML = `
        <div id="terminal"></div>
        `;
    }
    
});