const mysql = require("mysql");
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io').listen(server);

const util = require('util');
app.use('/', express.static('www'));

let pl = require('mysql/lib/Pool');
pl.prototype.getConnectionAsync = util.promisify(pl.prototype.getConnection);
pl.prototype.queryAsync = util.promisify(pl.prototype.query);
let cn = require('mysql/lib/Connection');
cn.prototype.queryAsync = util.promisify(cn.prototype.query);

let c = mysql.createConnection({
    host: 'hercules.ii.fmph.uniba.sk',
    user: 'wa2',
    password: 'JzY8enG5h3nd3NIZ',
    database: 'wa2'
});

c.queryAsync = util.promisify(c.query);


c.connect();


async function Init() {
    await c.queryAsync('CREATE TABLE IF NOT EXISTS `Participants_hornikova30` (\n' +
        '  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,\n' +
        '  `name` varchar(50) COLLATE utf8mb4_general_ci NOT NULL,\n' +
        '  `surname` varchar(50) COLLATE utf8mb4_general_ci NOT NULL,\n' +
        '   PRIMARY KEY (`id`)\n' +
        ') ENGINE=InnoDB ROW_FORMAT=DYNAMIC DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;\n')
}

io.on('connect', socket => {
    console.log('Nový klient pripojený.');

    socket.on('disconnect', msg => {
        console.log('Klient odpojený.', msg);
    });
    socket.on('error', error => {
        console.log('Chyba spojenia.', error.message);
    });


    socket.on('insert', async zs => {
        let {name, surname} = zs;

        if (name.length > 0 && surname.length > 0) {
            let sql = 'INSERT INTO Participants_hornikova30 (name, surname) VALUES (?,?) ';
            sql = mysql.format(sql, [name, surname]);
            await c.queryAsync(sql);

            let rows = await c.queryAsync("SELECT * FROM Participants_hornikova30");
            io.emit('refresh', rows);
        }

    });

    socket.on('select', async func => {
        let rows = await c.queryAsync("SELECT * FROM Participants_hornikova30");
        func(rows);
    });

    socket.on('delete', async id => {
        let sql = 'DELETE FROM Participants_hornikova30 WHERE `id` = ?';
        sql = mysql.format(sql, [id]);
        await c.queryAsync(sql);

        let rows = await c.queryAsync("SELECT * FROM Participants_hornikova30");
        io.emit('refresh', rows);
    });


});

server.listen(9000, () => {
    Init();
    console.log('Listen on port 9000');
});









//NOVY SUBOR


const $e = (elName, cl, parEl) => {
    const e = document.createElement(elName);
    if (cl) e.classList.add(cl);
    if (parEl) parEl.appendChild(e);
    return e;
};


var socket = io.connect();


class UserList {

    constructor(x, y, w = 330, h = 400) {
        var el, ro = this.root = $e('div', 'Main');
        ro.style.left = x + 'px';
        ro.style.top = y + 'px';
        ro.style.width = w + 'px';
        ro.style.height = h + 'px';

        $e('div', 'Headline', ro).innerHTML = 'Zoznam účastníkov';

        this.list = $e('div', 'List', ro);

        el = $e('button', 'Button', ro);
        el.innerHTML = 'Registruj sa';
        el.addEventListener('mousedown', e => this.root.querySelector('.Formular').classList.toggle('Formular2'));

        el = $e('div', 'Formular', ro);
        $e('div', '', el).innerHTML = 'Meno:';
        this.input1 = $e('input', null, el);
        $e('div', '', el).innerHTML = 'Priezvisko:';
        this.input2 = $e('input', null, el);
        el = $e('button', 'sendButton', el);
        el.innerHTML = 'Posli';
        el.addEventListener('mousedown', e => {
            this.root.querySelector('.Formular').classList.toggle('Formular2');
            this.send();
            this.input1.value = this.input2.value = '';
        });

        document.body.appendChild(ro);

        socket.on('refresh', db => this.refresh(db));
        socket.emit('select', db => this.refresh(db));
    }


    send() {
        socket.emit('insert', {'name': this.input1.value, 'surname': this.input2.value});
    }


    refresh(db) {
        this.list.innerHTML = '';
        db.forEach(r => {
            var el = $e('div', 'Row', this.list);
            el.innerHTML = r.name + ' ' + r.surname;

            const span = $e('span', 'delButton', el);
            span.innerText = 'X';
            span.addEventListener('click', () => {
                socket.emit('delete', r.id);
            });
            // Sem doplnit kod.

        });
    }

}


window.addEventListener('load', () => {
    new UserList(20, 50);
    new UserList(450, 150);
});