// class Menu {
//     #application;
//     #root;
//     #items;
//
//     constructor(application) {
//         this.#application = application;
//         this.#root = document.querySelector('#menu');
//         this.#items = this.#root.querySelectorAll('input[data-page]');
//         this.#items.forEach(item => {
//             item.addEventListener('click', () => this.#application.open(item.dataset.page));
//         });
//     };
//
//     setActive(pageId) {
//         this.#items.forEach(item => item.classList.remove('active'));
//         this.#items.forEach(item => item.dataset.page === pageId ? item.classList.add('active') : null);
//     };
// }
//
// class Application {
//     static DEFAULT_PAGE = 'dashboard';
//
//     #inputContainer;
//     #outputContainer;
//     #menu;
//     #pageId;
//
//     constructor() {
//         this.#inputContainer = document.querySelector('#input');
//         this.#outputContainer = document.querySelector('#output');
//         this.#menu = new Menu(this);
//     };
//
//     open(pageId) {
//         this.#pageId = pageId;
//         document.querySelectorAll('#input [data-page]').forEach(page => page.classList.remove('active'));
//         document.querySelector(`#input [data-page="${pageId}"]`).classList.add('active');
//         document.querySelectorAll('#output [data-page]').forEach(page => page.classList.remove('active'));
//         this.#menu.setActive(pageId);
//     };
// }

// const mutableStateOf = {
//     _value: null,
//     constructor(value) {
//         this._value = value
//     },
//     get value() {
//         return this._value
//     },
//     set value(value) {
//         this._value = value
//     }
// }

const connectWebSocket = (url) => {
    const ws = new WebSocket(url)

    ws.onopen = () => {

    }

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data)
        document.querySelectorAll(`#${data.id}`).forEach(element => element.toggleAttribute('selected', data.value))
    }

    ws.onclose = () => {

    }

    return ws
}

const wsUrl = new URL(location)
wsUrl.protocol = 'wss'
wsUrl.pathname = '/ws'
const ws = connectWebSocket(wsUrl)

function getSwitch(id) {
    const element = document.createElement('md-switch')
    element.id = id
    element.onclick = (event) => {
        event.preventDefault()
        const data = JSON.stringify({
            id: id,
            value: !event.currentTarget.hasAttribute('selected'),
        })
        ws.send(data)
    }
    return element
}

document.addEventListener('DOMContentLoaded', () => {
    document.body.querySelector('main').append(getSwitch('qwerty'))
})