(function () {
    const element = document.getElementById('new_member_user_id');
    const choices = new Choices(element, {
        noResultsText: 'No users found',
        noChoicesText: 'Start typing to search users'
    });

    element.addEventListener('search', RVR.debounce(async function (e) {
        RVR.httpRequest('GET', `/searchUser?q=${encodeURIComponent(e.detail.value)}`, function () {
            choices.setChoices(this.response.results, 'value', 'label', true);
        });
    }));

    element.addEventListener('choice', function () {
        choices.setChoices([], 'value', 'label', true);
        document.getElementById('new_member_button').disabled = false;
    });

    document.getElementById('new_member_button').addEventListener('click', function () {
        document.getElementById('loading').style.visibility = 'visible';

        let data = new FormData();
        data.append('user_id', document.getElementById('new_member_user_id').value);

        RVR.httpRequest('POST', newMemberUrl, function () {
            window.location.reload();
        }, data);
    });

    const ownerCheckboxesButtons = document.getElementsByClassName('member_owner');
    for (const ownerCheckboxesButton of ownerCheckboxesButtons) {
        ownerCheckboxesButton.addEventListener('change', function () {
            document.getElementById('loading').style.visibility = 'visible';

            let data = new FormData();
            data.append('community_member_id', this.dataset.id);
            data.append('owner', this.checked ? 1 : 0);

            RVR.httpRequest('POST', editMemberUrl, function () {
                document.getElementById('loading').style.visibility = 'hidden';

                if (!this.response.success) {
                    ownerCheckboxesButton.checked = !ownerCheckboxesButton.checked;
                }
            }, data);
        });
    };

    const deleteButtons = document.getElementsByClassName('delete_member');
    for (const deleteButton of deleteButtons) {
        deleteButton.addEventListener('click', function () {
            document.getElementById('loading').style.visibility = 'visible';

            let data = new FormData();
            data.append('community_member_id', this.dataset.id);

            RVR.httpRequest('POST', deleteMemberUrl, function () {
                window.location.reload();
            }, data);
        });
    };
})();