'use strict';

function initRoster(connection) {
    const roster_table = document.getElementById('roster-table');

    const iq = $iq({type: 'get'})
        .c('query', {xmlns: NS.roster});
    connection.sendIQ(iq, onRoster, onRosterError.bind(null, 'roster query failed.'));

    function onRoster(result_iq)
    {
        const items = parseXPath(result_iq, './roster:query/roster:item', XPathResult.ORDERED_NODE_ITERATOR_TYPE);
        while (true) {
            const item = items.iterateNext();
            if (!item)
                break;
            const jid = item.getAttributeNS(null, 'jid');
            const subscription = item.getAttributeNS(null, 'subscription');
            const name = item.getAttributeNS(null, 'name');
            const groups = item.children;
            const tr = document.createElementNS('http://www.w3.org/1999/xhtml', 'tr');
            let td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
            const a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            a.setAttributeNS(null, 'href', 'xmpp:' + jid);
            a.textContent = jid;
            td.appendChild(a);
            tr.appendChild(td);
            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
            const input = document.createElementNS('http://www.w3.org/1999/xhtml', 'input');
            input.value = name;
            input.addEventListener('change', function (evt) {
                const iq = $iq({type: 'set'})
                    .c('query', {xmlns: NS.roster})
                        .c('item', {jid: jid, name: evt.target.value});
                for (let group of groups)
                    iq.c('group').t(group.textContent).up();
                connection.sendIQ(iq, onRosterSet, onRosterSetError.bind(null, 'Roster set failed.'));
            });
            td.appendChild(input);
            tr.appendChild(td);
            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
            td.textContent = subscription;
            tr.appendChild(td);
            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
            for (let group of groups) {
                const span = document.createElementNS('http://www.w3.org/1999/xhtml', 'span');
                // TODO: use a tag system for the UI.
                span.textContent = group.textContent;
                td.appendChild(span);
            }
            tr.appendChild(td);
            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
            const button = document.createElementNS('http://www.w3.org/1999/xhtml', 'button');
            button.classList.add('btn');
            button.classList.add('btn-danger');
            button.textContent = '✕';
            button.onclick = function (evt) {
                const really = confirm('{% trans 'Do you really want to remove {}?' %}'.replace('{}', jid));
                if (!really)
                    return;
                const iq = $iq({type: 'set'})
                    .c('query', {xmlns: NS.roster})
                        .c('item', {jid: jid, subscription: 'unsubscribe'});
                connection.sendIQ(iq, onRosterSet.bind(node), onRosterSetError.bind(node, 'contact removal failed.'));
            };
            td.appendChild(button);
            tr.appendChild(td);
            roster_table.appendChild(tr);
        }
    }

    function onRosterError(string)
    {
        console.log('Failed to retrieve your contact list: ' + string);
    }

    function onRosterSet(result_iq)
    {
        console.log(result_iq);
    }

    function onRosterSetError(string)
    {
        console.log('Failed to retrieve your contact list: ' + string);
    }
}