// 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 syncUrl = new URL('https://cit.csasq.ru/ws/sync')

const SyncDataType = {
    TEXT: 0,
    BOOLEAN: 1,
}

const enableSync = (url) => {
    let ws = new WebSocket(url)

    document
        .querySelectorAll('md-outlined-text-field[data-sync]')
        .forEach(element => element.addEventListener('input', () => {
            const data = JSON.stringify({
                id: element.id,
                type: SyncDataType.TEXT,
                value: element.value,
            })
            ws.send(data)
        }))

    document
        .querySelectorAll('md-switch[data-sync]')
        .forEach(element => element.addEventListener('change', () => {
            const data = JSON.stringify({
                id: element.id,
                type: SyncDataType.BOOLEAN,
                value: !element.hasAttribute('selected'),
            })
            ws.send(data)
        }))

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data)
        const elements = document.querySelectorAll(`#${data.id}`)

        switch (data.type) {
            case SyncDataType.TEXT:
                elements.forEach(element => element.value = data.value)
                break

            case SyncDataType.BOOLEAN:
                elements.forEach(element => element.toggleAttribute('selected', data.value))
                break
        }
    }

    ws.onclose = () => () => ws = new WebSocket(url)

    ws.onerror = () => {
        console.log('ws_error')
    }
}

document.addEventListener('DOMContentLoaded', () => enableSync(syncUrl))