import elementClosest from 'element-closest';
import 'formdata-polyfill';
import 'classlist.js';
import 'whatwg-fetch';
import 'core-js/stable';
import { embedLinksToX, embedAll, format } from '../../../vnext/src/utils/embed';
import renderIcons from './icon';
import svg4everybody from 'svg4everybody';

/**
 * Autosize textarea
 *
 * @param {HTMLTextAreaElement} el textarea element
 */
function autosize(el) {
    let offset = el.offsetHeight - el.clientHeight;

    el.addEventListener('input', (ev) => {
        const textarea = /** @type {HTMLTextAreaElement} */ (ev.target);
        textarea.style.height = 'auto';
        textarea.style.height = (textarea.scrollHeight + offset) + 'px';
    });
}

/**
 * Display an icon from the evil-icons set
 *
 * @param {string} name Icon name from the iconset
 * @returns {string} HTML markup for the selected icon
 */
function evilIcon(name) {
    return `<div class="icon icon--${name}"><svg class="icon__cnt"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sprite.svg#${name}-icon"></use></svg></div>`;
}

/* eslint-disable only-ascii/only-ascii */
const translations = {
    'en': {
        'message.inReplyTo': 'in reply to',
        'message.reply': 'Reply',
        'message.likeThisMessage?': 'Recommend this message?',
        'postForm.pleaseInputMessageText': 'Please input message text',
        'postForm.upload': 'Upload',
        'postForm.newMessage': 'New message...',
        'postForm.imageLink': 'Link to image',
        'postForm.imageFormats': 'JPG/PNG, up to 100 MB',
        'postForm.or': 'or',
        'postForm.tags': 'Tags (space separated)',
        'postForm.submit': 'Send',
        'comment.writeComment': 'Write a comment...',
        'shareDialog.linkToMessage': 'Link to message',
        'shareDialog.messageNumber': 'Message number',
        'shareDialog.share': 'Share',
        'loginDialog.pleaseIntroduceYourself': 'Please introduce yourself',
        'loginDialog.registeredAlready': 'Registered already?',
        'loginDialog.username': 'Username',
        'loginDialog.password': 'Password',
        'loginDialog.facebook': 'Login with Facebook',
        'loginDialog.vk': 'Login with VK',
        'loginDialog.email': 'Registration',
        'error.error': 'Error',
        'settings.notifications.granted': 'Enabled',
        'settings.notifications.denied': 'Denied',
        'settings.notifications.request': 'Enable',
    },
    'ru': {
        'message.inReplyTo': 'в ответ на',
        'message.reply': 'Ответить',
        'message.likeThisMessage?': 'Рекомендовать это сообщение?',
        'postForm.pleaseInputMessageText': 'Пожалуйста, введите текст сообщения',
        'postForm.upload': 'загрузить',
        'postForm.newMessage': 'Новое сообщение...',
        'postForm.imageLink': 'Ссылка на изображение',
        'postForm.imageFormats': 'JPG/PNG, до 100 Мб',
        'postForm.or': 'или',
        'postForm.tags': 'Теги (через пробел)',
        'postForm.submit': 'Отправить',
        'comment.writeComment': 'Написать комментарий...',
        'shareDialog.linkToMessage': 'Ссылка на сообщение',
        'shareDialog.messageNumber': 'Номер сообщения',
        'shareDialog.share': 'Поделиться',
        'loginDialog.pleaseIntroduceYourself': 'Пожалуйста, представьтесь',
        'loginDialog.registeredAlready': 'Уже зарегистрированы?',
        'loginDialog.username': 'Имя пользователя',
        'loginDialog.password': 'Пароль',
        'loginDialog.facebook': 'Войти через Facebook',
        'loginDialog.vk': 'Войти через ВКонтакте',
        'loginDialog.email': 'Регистрация',
        'error.error': 'Ошибка',
        'settings.notifications.granted': 'Подключено',
        'settings.notifications.denied': 'Запрещено',
        'settings.notifications.request': 'Подключить',
    }
};
/* eslint-enable only-ascii/only-ascii */

/**
 * Detect window language
 *
 * @returns {string} Detected language
 */
function getLang() {
    return (window.navigator.languages && window.navigator.languages[0])
        || window.navigator['userLanguage']
        || window.navigator.language;
}
function i18n(key = '', lang = undefined) {
    const fallbackLang = 'ru';
    lang = lang || getLang().split('-')[0];
    return (translations[lang] && translations[lang][key])
        || translations[fallbackLang][key]
        || key;
}

/** @type { EventSource } */
var es;
var pageTitle;

function initES() {
    if (!('EventSource' in window)) {
        return;
    }
    let url = '/api/events';
    let hash = document.getElementById('body').getAttribute('data-hash');
    if (hash) {
        url += '?hash=' + hash;
    }

    es = new EventSource(url);
    es.onopen = function() {
        console.log('online');
        if (!document.querySelector('#wsthread')) {
            var d = document.createElement('div');
            d.id = 'wsthread';
            d.addEventListener('click', nextReply);
            document.querySelector('body').appendChild(d);
            pageTitle = document.title;
        }
    };
    es.addEventListener('msg', msg => {
        try {
            var jsonMsg = JSON.parse(msg.data);
            console.log('data: ' + msg.data);
            if (jsonMsg.service) {
                return;
            }
            wsIncomingReply(jsonMsg);
        } catch (err) {
            console.log(err);
        }
    });
}

function wsIncomingReply(msg) {
    let content = document.getElementById('content');
    if (!content) { return; }
    let pageMID = content.getAttribute('data-mid');
    if (!pageMID || pageMID != msg.mid) { return; }
    let msgNum = '/' + msg.rid;
    if (msg.replyto > 0) {
        msgNum += ` ${i18n('message.inReplyTo')} <a href="#${msg.replyto}">/${msg.replyto}</a>`;
    }
    let photoDiv = (msg.attach == null) ? '' : `
            <div class="msg-media"><a href="//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}">
                <img src="//i.juick.com/photos-512/${msg.mid}-${msg.rid}.${msg.attach}"/></a>
            </div>`;
    let msgContHtml = `
        <div class="msg-cont">
            <div class="msg-header">
                <a href="/${msg.user.uname}/">${msg.user.uname}</a>:
                <div class="msg-avatar">
                    <a href="/${msg.user.uname}/"><img src="//i.juick.com/a/${msg.user.uid}.png" alt="${msg.user.uname}"/></a>
                </div>
                <div class="msg-ts">
                    <a href="/m/${msg.mid}#${msg.rid}" title="${msg.timestamp}GMT">${msg.timestamp}</a>
                </div>
            </div>
            <div class="msg-txt">${format(msg.body, msg.mid, false)}</div>${photoDiv}
            <div class="msg-links">${msgNum} &middot; <a class="msg-reply-link" href="#">${i18n('message.reply')}</a></div>
            <div class="msg-comment-target msg-comment-hidden"></div>
        </div>`;

    let li = document.createElement('li');
    li.setAttribute('class', 'msg reply-new');
    li.setAttribute('id', msg.rid);
    li.innerHTML = msgContHtml;
    li.addEventListener('click', newReply);
    li.addEventListener('mouseover', newReply);
    li.querySelector('a.msg-reply-link').addEventListener('click', function(e) {
        showCommentForm(msg.mid, msg.rid);
        e.preventDefault();
    });

    embedLinksToX(li.querySelector('.msg-cont'), '.msg-links', '.msg-txt a');

    document.getElementById('replies').appendChild(li);

    updateRepliesCounter();
}

function newReply(e) {
    var li = e.target;
    li.classList.remove('reply-new');
    li.removeEventListener('click', e);
    li.removeEventListener('mouseover', e);
    updateRepliesCounter();
}

function nextReply() {
    var li = document.querySelector('#replies>li.reply-new');
    if (li) {
        li.classList.remove('reply-new');
        li.removeEventListener('click', this);
        li.children[0].scrollIntoView();
        updateRepliesCounter();
    }
}

function updateRepliesCounter() {
    var replies = Array.from(document.querySelectorAll('#replies>li.reply-new')).length;
    var wsthread = document.getElementById('wsthread');
    if (replies) {
        wsthread.textContent = `${replies}`;
        wsthread.style.display = 'block';
        document.title = '[' + replies + '] ' + pageTitle;
    } else {
        wsthread.style.display = 'none';
        document.title = pageTitle;
    }
}

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

/**
 * Submit form on Ctrl+Enter
 *
 * @param {HTMLElement} formEl Target form element
 * @param {KeyboardEvent} ev Keyboard event
 */
function postformListener(formEl, ev) {
    if (ev.ctrlKey && (ev.keyCode == 10 || ev.keyCode == 13)) {
        let form = formEl.closest('form');
        if (!form.onsubmit || form.submit()) {
            /** @type {HTMLInputElement} */ (form.querySelector('input[type="submit"]')).click();
        }
    }
}

/**
 * Close dialog on Esc
 *
 * @param {KeyboardEvent} ev Keyboard event
 */
function closeDialogListener(ev) {
    ev = ev || /** @type {KeyboardEvent} */ (window.event);
    if (ev.keyCode == 27) {
        closeDialog();
    }
}

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

/**
 *
 * @param {number} mid message id
 * @param {string} rid reply id
 */
function showCommentForm(mid, rid) {
    let reply = /** @type { HTMLElement } */ (document.getElementById(rid));
    let formTarget = reply.querySelector('div.msg-cont .msg-comment-target');
    if (formTarget) {
        let formHtml = `
            <form>
                <input type="hidden" name="mid" value="${mid}">
                <input type="hidden" name="rid" value="${rid}">
                <div class="msg-comment">
                    <div class="ta-wrapper">
                        <textarea name="body" rows="1" class="reply" placeholder="${i18n('comment.writeComment')}"></textarea>
                        <div class="attach-photo">${evilIcon('ei-camera')}</div>
                    </div>
                    <input type="submit" class="Button" value="OK">
                </div>
            </form>`;
        formTarget.insertAdjacentHTML('afterend', formHtml);
        formTarget.remove();

        let form = /** @type {HTMLFormElement} */ (reply.querySelector('form'));
        let submitButton = /** @type {HTMLInputElement} */ (form.querySelector('input[type="submit"]'));

        let attachButton = /** @type {HTMLInputElement} */ (form.querySelector('.msg-comment .attach-photo'));
        attachButton.addEventListener('click', e => attachCommentPhoto(/** @type {HTMLDivElement} */(e.target)));

        let textarea = /** @type {HTMLTextAreaElement} */ (form.querySelector('.msg-comment textarea'));
        textarea.addEventListener('keypress', e => postformListener(/** @type {HTMLElement} */(e.target), e));
        autosize(textarea);

        let validateMessage = () => {
            let len = textarea.value.length;
            if (len > 4096) { return 'Message is too long'; }
            return '';
        };
        form.addEventListener('submit', e => {
            let validationResult = validateMessage();
            if (validationResult) {
                e.preventDefault();
                alert(validationResult);
                return false;
            }
            submitButton.disabled = true;
            let formData = new FormData(form);
            fetch('/api/comment' + '?hash=' + document.getElementById('body').getAttribute('data-hash'), {
                method: 'POST',
                body: formData,
                credentials: 'omit'
            }).then(handleErrors)
                .then(response => {
                    if (response.ok) {
                        response.json().then(result => {
                            if (result.newMessage) {
                                window.location.hash = `#${result.newMessage.rid}`;
                            } else {
                                alert(result.text);
                            }
                            window.location.reload();
                        });
                    }
                }).catch(error => {
                    alert(error.message);
                });
            e.preventDefault();
        });
    }
    /** @type {HTMLTextAreaElement} */ (reply.querySelector('.msg-comment textarea')).focus();
}

function attachInput() {
    let inp = document.createElement('input');
    inp.setAttribute('type', 'file');
    inp.setAttribute('name', 'attach');
    inp.setAttribute('accept', 'image/jpeg,image/png');
    inp.style.visibility = 'hidden';
    return inp;
}

/**
 * "Attach" button
 *
 * @param {HTMLDivElement} div element attach to
 */
function attachCommentPhoto(div) {
    let input = div.querySelector('input');
    if (input) {
        input.remove();
        div.classList.remove('attach-photo-active');
    } else {
        let newInput = attachInput();
        newInput.addEventListener('change', function() {
            div.classList.add('attach-photo-active');
        });
        newInput.click();
        div.appendChild(newInput);
    }
}

function showPhotoDialog(fname) {
    let width = window.innerWidth;
    let height = window.innerHeight;
    let minDimension = (width < height) ? width : height;
    if (minDimension < 640) {
        return true; // no dialog, open the link
    } else if (minDimension < 1280) {
        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/photos-1024/${fname}"/></a>`, true);
        return false;
    } else {
        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/p/${fname}"/></a>`, true);
        return false;
    }
}

function openDialog(html, image) {
    var dialogHtml = `
        <div id="dialogt">
            <div id="dialogb"></div>
            <div id="dialogw">
                <div id="dialog_header">
                    <div id="dialogc">${evilIcon('ei-close')}</div>
                </div>
                ${html}
            </div>
        </div>`;
    let body = /** @type {HTMLElement} */ (document.querySelector('body'));
    body.classList.add('dialog-opened');
    body.insertAdjacentHTML('afterbegin', dialogHtml);
    if (image) {
        let header = /** @type {HTMLElement} */ (document.querySelector('#dialog_header'));
        header.classList.add('header_image');
    }
    document.addEventListener('keydown', closeDialogListener);
    document.querySelector('#dialogb').addEventListener('click', closeDialog);
    document.querySelector('#dialogc').addEventListener('click', closeDialog);
}

function closeDialog() {
    document.querySelector('body').classList.remove('dialog-opened');
    document.querySelector('#dialogb').remove();
    document.querySelector('#dialogt').remove();
}

function checkUsername() {
    var uname = document.querySelector('#username').textContent,
        style = /** @type {HTMLElement} */ (document.querySelector('#username')).style;
    fetch('/api/users?uname=' + uname)
        .then(handleErrors)
        .then(function() {
            style.background = '#FFCCCC';
        })
        .catch(function() {
            style.background = '#CCFFCC';
        });
}

/******************************************************************************/

function resultMessage(str) {
    var result = document.createElement('p');
    result.textContent = str;
    return result;
}

function likeMessage(e, mid) {
    if (confirm(i18n('message.likeThisMessage?'))) {
        fetch('/api/like?mid=' + mid
            + '&hash=' + document.getElementById('body').getAttribute('data-hash'), {
            method: 'POST',
            credentials: 'omit'
        })
            .then(handleErrors)
            .then(function(response) {
                if (response.ok) {
                    e.closest('article').appendChild(resultMessage('OK!'));
                }
            })
            .catch(function() {
                e.closest('article').appendChild(resultMessage(i18n('error.error')));
            });
    }
    return false;
}

function subscribeMessage(e, mid) {
    fetch('/api/subscribe?mid=' + mid
        + '&hash=' + document.getElementById('body').getAttribute('data-hash'), {
        method: 'POST',
        credentials: 'omit'
    })
        .then(handleErrors)
        .then(function(response) {
            if (response.ok) {
                window.location.reload();
            } else {
                alert('Something went wrong :(');
            }
        })
        .catch(error => {
            alert(error.message);
        });
    return false;
}

/******************************************************************************/

function setPrivacy(e, mid) {
    fetch('/api/messages/set_privacy?mid=' + mid
        + '&hash=' + document.getElementById('body').getAttribute('data-hash'), {
        credentials: 'same-origin',
        method: 'POST'
    })
        .then(handleErrors)
        .then(function(response) {
            if (response.ok) {
                window.location.reload();
            } else {
                alert('Something went wrong :(');
            }
        })
        .catch(console.err);
    return false;
}

function getTags() {
    fetch('/api/tags?hash=' + document.getElementById('body').getAttribute('data-hash'), {
        credentials: 'omit'
    })
        .then(handleErrors)
        .then(response => {
            return response.json();
        })
        .then(json => {
            let tags = json.map(t => t.tag);
            let input = document.getElementById('tags_input');
        });
    return false;
}

function addTag(tag) {
    document.forms['postmsg'].body.value = '*' + tag + ' ' + document.forms['postmsg'].body.value;
    return false;
}

function fetchUserUri(dataUri, callback) {
    let data = new FormData();
    data.append('uri', dataUri);
    fetch('/api/u/', {
        method: 'POST',
        body: data
    }).then(handleErrors)
        .then(response => {
            return response.json();
        })
        .then(json => {
            callback(json);
        })
        .catch(e => {
            callback({ uname: dataUri, uri: dataUri });
        });
}

const registerServiceWorker = () => {
    const publicKey = 'BPU0LniKKR0QiaUvILPd9AystmSOU8rWDZobxKm7IJN5HYxOSQdktRdc74TZvyRS9_kyUz7LDN6gUAmAVOmObAU';
    navigator.serviceWorker.register('/sw.js', { scope: '/' });
    navigator.serviceWorker.ready.then(reg => {
        reg.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: publicKey
        }).then(
            sub => {
                const body = [
                    {
                        type: 'web',
                        token: JSON.stringify(sub)
                    }
                ];
                fetch('/api/notifications?hash=' + document.getElementById('body').getAttribute('data-hash'), {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify(body)
                }).then(response => {
                    console.log(response.status);
                });
            },
            err => console.error(err)
        );
    });
};

function notificationsCheckPermissions(button) {
    console.log(Notification.permission);
    switch (Notification.permission.toLowerCase()) {
        case 'granted':
            button.innerHTML = `${i18n('settings.notifications.granted')}`;
            button.disabled = true;
            registerServiceWorker();
            break;

        case 'denied':
            button.innerHTML = `${i18n('settings.notifications.denied')}`;
            button.disabled = true;
            break;

        case 'default':
            button.innerHTML = `${i18n('settings.notifications.request')}`;
    }
}

/******************************************************************************/

function ready(fn) {
    if (document.readyState != 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

ready(() => {
    elementClosest(window);
    Array.from(document.querySelectorAll('textarea')).forEach((ta) => {
        autosize(ta);
    });
    svg4everybody();
    renderIcons();
    var insertPMButtons = function(e) {
        e.target.classList.add('narrowpm');
        e.target.parentNode.insertAdjacentHTML('afterend', '<input type="submit" class="Button" value="OK"/>');
        e.target.removeEventListener('click', insertPMButtons);
        e.preventDefault();
    };
    /** @type {HTMLTextAreaElement[]} */ (Array.from(document.querySelectorAll('textarea.replypm'))).forEach(function(e) {
        e.addEventListener('click', insertPMButtons);
        e.addEventListener('keypress', function(e) {
            postformListener(/** @type {HTMLElement} */(e.target), e);
        });
    });
    /** @type {HTMLTextAreaElement[]} */ (Array.from(document.querySelectorAll('#postmsg textarea'))).forEach(function(e) {
        e.addEventListener('keypress', function(e) {
            postformListener(/** @type {HTMLElement} */(e.target), e);
        });
    });

    var content = document.getElementById('content');
    if (content) {
        var pageMID = +content.getAttribute('data-mid');
        if (pageMID > 0) {
            Array.from(document.querySelectorAll('li.msg')).forEach(li => {
                let showReplyFormBtn = li.querySelector('.a-thread-comment');
                if (showReplyFormBtn) {
                    showReplyFormBtn.addEventListener('click', function(e) {
                        showCommentForm(pageMID, li.id);
                        e.preventDefault();
                    });
                }
            });
            let opMessage = document.querySelector('.msgthread');
            if (opMessage) {
                let replyTextarea = /** @type {HTMLTextAreaElement} */ (opMessage.querySelector('textarea.reply'));
                if (replyTextarea) {
                    replyTextarea.addEventListener('focus', e => showCommentForm(pageMID, 0));
                    replyTextarea.addEventListener('keypress', e => postformListener(/** @type {HTMLElement} */(e.target), e));
                    if (!window.location.hash) {
                        replyTextarea.focus();
                    }
                }
            }
        }
    }

    var postmsg = /** @type {HTMLFormElement} */(document.getElementById('postmsg'));
    if (postmsg) {
        Array.from(document.querySelectorAll('a')).filter(t => t.href.indexOf('?') >= 0).forEach(t => {
            t.addEventListener('click', e => {
                let params = new URLSearchParams(t.href.slice(t.href.indexOf('?') + 1));
                if (params.has('tag')) {
                    addTag(params.get('tag'));
                    e.preventDefault();
                }
            });
        });
        postmsg.addEventListener('submit', e => {
            let formData = new FormData(postmsg);
            fetch('/api/post' + '?hash=' + document.getElementById('body').getAttribute('data-hash'), {
                method: 'POST',
                body: formData,
                credentials: 'omit'
            }).then(handleErrors)
                .then(response => {
                    if (response.ok) {
                        response.json().then(result => {
                            if (result.newMessage) {
                                window.location.href = new URL(`/m/${result.newMessage.mid}`, window.location.href).href;
                            } else {
                                alert(result.text);
                            }
                        });
                    } else {
                        alert('Something went wrong :(');
                    }
                }).catch(error => {
                    alert(error.message);
                });
            e.preventDefault();
        });
    }
    /** @type {HTMLFormElement[]} */ (Array.from(document.querySelectorAll('.pmmsg'))).forEach(pmmsg => {
        pmmsg.addEventListener('submit', e => {
            let formData = new FormData(pmmsg);
            fetch('/api/pm' + '?hash=' + document.getElementById('body').getAttribute('data-hash'), {
                method: 'POST',
                body: formData,
                credentials: 'omit'
            }).then(handleErrors)
                .then(response => {
                    if (response.ok) {
                        response.json().then(result => {
                            if (result.to) {
                                window.location.href = new URL('/pm/sent', window.location.href).href;
                            } else {
                                alert('Something went wrong :(');
                            }
                        });
                    } else {
                        alert('Something went wrong :(');
                    }
                }).catch(error => {
                    alert(error.message);
                });
            e.preventDefault();
        });
    });

    Array.from(document.querySelectorAll('.l .a-privacy')).forEach(function(e) {
        e.addEventListener('click', function(e) {
            setPrivacy(
                e.target,
                document.getElementById('content').getAttribute('data-mid'));
            e.preventDefault();
        });
    });
    Array.from(document.querySelectorAll('.ir a[data-fname], .msg-media a[data-fname]')).forEach(function(el) {
        el.addEventListener('click', function(e) {
            let fname = /** @type {HTMLElement} */ (e.target).closest('[data-fname]').getAttribute('data-fname');
            if (!showPhotoDialog(fname)) {
                e.preventDefault();
            }
        });
    });

    var username = document.getElementById('username');
    if (username) {
        username.addEventListener('blur', function() {
            checkUsername();
        });
    }

    Array.from(document.querySelectorAll('.l .a-like')).forEach(function(e) {
        e.addEventListener('click', function(e) {
            likeMessage(
                e.target,
                /** @type {HTMLElement} */(e.target).closest('article').getAttribute('data-mid'));
            e.preventDefault();
        });
    });
    Array.from(document.querySelectorAll('.l .a-sub')).forEach(function(e) {
        e.addEventListener('click', function(e) {
            subscribeMessage(
                e.target,
                document.getElementById('content').getAttribute('data-mid'));
            e.preventDefault();
        });
    });
    var unfoldall = document.getElementById('unfoldall');
    if (unfoldall) {
        unfoldall.addEventListener('click', function(e) {
            /** @type {HTMLElement[]} */ (Array.from(document.querySelectorAll('#replies>li'))).forEach(function(e) {
            e.style.display = 'block';
        });
            /** @type {HTMLElement[]} */ (Array.from(document.querySelectorAll('#replies .msg-comments'))).forEach(function(e) {
            e.style.display = 'none';
        });
            e.preventDefault();
        });
    }
    Array.from(document.querySelectorAll('article')).forEach(function(article) {
        if (Array.prototype.some.call(
            Array.from(article.querySelectorAll('.msg-tags a')),
            function(a) {
                return a.textContent === 'NSFW';
            }
        )) {
            article.classList.add('nsfw');
        }
    });
    Array.from(document.querySelectorAll('[data-uri]')).forEach(el => {
        let dataUri = el.getAttribute('data-uri') || '';
        if (dataUri) {
            setTimeout(() => fetchUserUri(dataUri, user => {
                let header = el.closest('.msg-header');
                Array.from(header.querySelectorAll('.a-username')).forEach(a => {
                    a.setAttribute('href', user.url || user.uri);
                    let img = a.querySelector('img');
                    if (img && user.avatar) {
                        img.setAttribute('src', user.avatar);
                        img.setAttribute('alt', user.uname);
                    }
                    let textNode = a.childNodes[0];
                    if (textNode.nodeType === Node.TEXT_NODE && textNode.nodeValue.trim().length > 0) {
                        let uname = document.createTextNode(user.uname);
                        a.replaceChild(uname, a.firstChild);
                    }
                });
            }), 100);
        }
    });
    Array.from(document.querySelectorAll('[data-user-uri]')).forEach(el => {
        let dataUri = el.getAttribute('href') || '';
        if (dataUri) {
            setTimeout(() => fetchUserUri(dataUri, user => {
                let textNode = el.childNodes[0];
                if (textNode.nodeType === Node.TEXT_NODE && textNode.nodeValue.trim().length > 0) {
                    let uname = document.createTextNode(`@${user.uname}`);
                    el.replaceChild(uname, el.firstChild);
                    el.setAttribute('href', user.url || user.uri);
                }
            }), 100);
        }
    });
    let location = window.location.href;
    /** @type {HTMLLinkElement[]} */ (Array.from(document.querySelectorAll('#header_wrapper a'))).forEach(el => {
        if (el.href === location) {
            el.classList.add('active');
            el.setAttribute('disabled', 'disabled');
        }
    });
    initES();
    addEventListener('beforeunload', () => {
        if (es) {
            es.close();
        }
    });
    embedAll();
    const button = document.getElementById('notifications_toggle');
    if (button) {
        button.addEventListener('click', () => {
            Notification.requestPermission(function(result) { notificationsCheckPermissions(button); });
        });
        notificationsCheckPermissions(button);
    }
});