var SelectedFriends = []

setTimeout(function () {
    chrome.storage.sync.get(['PolyPlus_Settings'], function(result){
        Settings = result.PolyPlus_Settings;
        if (Settings.ImprovedFrListsOn === true) {
            var Tab = "requests"

            var FriendsContainer = document.getElementById('friends-container')
            var Container = document.createElement('div')
            Container.classList = 'row mb-3'
            Container.innerHTML = `
            <div class="col"><button id="AccAllFrBtn" class="btn btn-success w-100">Accept all Friend Request(s)</button></div>
            <div class="col"><button id="DelAllFrBtn" class="btn btn-danger w-100">Decline all Friend Request(s)</button></div>
            `
            FriendsContainer.parentElement.insertBefore(Container, FriendsContainer)
            var AccAllFrBtn = document.getElementById('AccAllFrBtn')
            var DelAllFrBtn = document.getElementById('DelAllFrBtn')
            var AccBtns = document.querySelectorAll('[onclick="acceptFriendRequest(this)"]')
            var DelBtns = document.querySelectorAll('[onclick="declineFriendRequest(this)"]')
            if (!(AccBtns.length === 0)) {
                AccAllFrBtn.addEventListener('click', function(){
                    AccBtns.forEach(element => {
                        setTimeout(function () {}, 145)
                        fetch('https://polytoria.com/api/friends/send', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-Token': document.querySelector('input[name="_csrf"]').value
                            },
                            body: JSON.stringify({ userID: parseInt(element.getAttribute('data-user-id')) }),
                        })
                        .catch(error => {
                            // Handle any errors
                            console.error('Error:', error);
                            Success = false
                        });

                        /*
                        let NewAcceptBtn = document.createElement('a')
                        NewAcceptBtn.style.display = 'none'
                        sNewAcceptBtn.classList = 'btn btn-success'
                        NewAcceptBtn.setAttribute('data-user-id', element.getAttribute('data-user-id'))
                        NewAcceptBtn.setAttribute('onclick', 'acceptFriendRequest(this)')
                        FriendsContainer.appendChild(NewAcceptBtn)
                        NewAcceptBtn.click();
                        */
                    })
                });
            } else {
                AccAllFrBtn.setAttribute('disabled', 'true')
            }
            if (!(DelBtns.length === 0)) {
                DelAllFrBtn.addEventListener('click', function(){
                    DelBtns.forEach(element => {
                        setTimeout(function () {}, 110)
                        fetch('https://polytoria.com/api/friends/remove', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-Token': document.querySelector('input[name="_csrf"]').value
                            },
                            body: JSON.stringify({ userID: parseInt(element.getAttribute('data-user-id')) }),
                        })
                        .catch(error => {
                            // Handle any errors
                            console.error('Error:', error, document.querySelector('input[name="_csrf"]').value);
                            Success = false
                        });

                        /*
                        let NewDeclineBtn = document.createElement('a')
                        NewDeclineBtn.style.display = 'none'
                        NewDeclineBtn.classList = 'btn btn-danger'
                        NewDeclineBtn.setAttribute('data-user-id', element.getAttribute('data-user-id'))
                        NewDeclineBtn.setAttribute('onclick', 'declineFriendRequest(this)')
                        FriendsContainer.appendChild(NewDeclineBtn)
                        NewDeclineBtn.click();
                        */
                    })
                });
            } else {
                DelAllFrBtn.setAttribute('disabled', 'true')
            }
            let Text = document.createElement('p')
            Text.classList = 'mx-auto'
            Text.style.textAlign = 'center'
            Text.style.fontSize = '1.3rem'
            Text.style.display = 'none'
            Text.innerHTML = `
            <span>0</span> friends selected!
            <br>
            <button id="viewSelectionBtn" class="btn btn-primary">View Selection</button>
            <button id="clearSelectionBtn" class="btn btn-warning">Clear Selection</button>
            <button id="removeSelectionBtn" class="btn btn-danger">Remove Selected Friends</button>
            `
            FriendsContainer.parentElement.insertBefore(Text, FriendsContainer)
            let Text_Span = Text.querySelector('span');
            let Text_View = document.getElementById('viewSelectionBtn');
            let Text_Clear = document.getElementById('clearSelectionBtn');
            let Text_Remove = document.getElementById('removeSelectionBtn');
            document.querySelector('[data-friends-tab="requests"]').addEventListener('click', function(){
                Tab = "requests"
                Container.style.display = '';
                Text.style.display = 'none';
                document.querySelectorAll('input[type="check"]').forEach(element => {element.remove();});
            });
            document.querySelector('[data-friends-tab="friends"]').addEventListener('click', function(){
                Tab = "friends"
                Container.style.display = 'none';
                Text.style.display = '';
            });
            var ConfirmRemove = 0
            Text_View.addEventListener('click', function(){});
            Text_Clear.addEventListener('click', function(){
                SelectedFriends = []
                UpdateCheckboxes();
                Text_Span.innerText = SelectedFriends.length
            });
            Text_Remove.addEventListener('click', function(){
                ConfirmRemove = ConfirmRemove + 1
                switch(ConfirmRemove) {
                    case 0:
                        Text_Remove.innerText = 'Remove Selected Friends'
                        break
                    case 1:
                        Text_Remove.innerText = 'Are you sure?'
                        break
                    case 2:
                        for (let i = 0; i < SelectedFriends.length; i++) {
                            setTimeout(function () {}, 110)
                            let NewDeclineBtn = document.createElement('a')
                            NewDeclineBtn.style.display = 'none'
                            NewDeclineBtn.classList = 'btn btn-danger'
                            NewDeclineBtn.setAttribute('data-user-id', SelectedFriends[i])
                            NewDeclineBtn.setAttribute('onclick', 'declineFriendRequest(this)')
                            FriendsContainer.appendChild(NewDeclineBtn)
                            NewDeclineBtn.click();
                        }
                        SelectedFriends = []
                        UpdateCheckboxes();
                        Text_Remove.innerText = 'Remove Selected Friends'
                        ConfirmRemove = 0
                        break
                }
            });

            const observer = new MutationObserver(function (){
                if (FriendsContainer.children.length > 0 && Tab === "friends") {
                    LoadCheckBoxes();
                }
            });
            observer.observe(FriendsContainer, {childList: true, subtree: false});

            function LoadCheckBoxes() {
                Array.from(FriendsContainer.children).forEach(element => {
                    let DeclineBtn = element.querySelector('a.btn.btn-danger')
                    let UserID = DeclineBtn.getAttribute('data-user-id')
                    let Column = document.createElement('div')
                    let EditColumn = element.querySelector('.col-9')
                    Column.classList = 'col-auto'
                    var NewCheckBox = document.createElement('button')
                    NewCheckBox.classList = 'polyplus-multiremovefr-checkbox'
                    NewCheckBox.setAttribute('style', 'padding: 20px; background-color: #191919; border: 1px solid #393939; border-radius: 1rem;')
                    var Index = SelectedFriends.indexOf(UserID)
                    if (Index !== -1) {
                        DeclineBtn.classList.add('disabled')
                        NewCheckBox.style.borderColor = 'lime'
                    }
                    EditColumn.classList.remove('col-9')
                    EditColumn.classList.add('col')
                    Column.appendChild(NewCheckBox)
                    EditColumn.parentElement.appendChild(Column)
                    NewCheckBox.addEventListener('click', function(){
                        var Index = SelectedFriends.indexOf(UserID)
                        if (Index === -1) {
                            DeclineBtn.classList.add('disabled')
                            SelectedFriends.push(UserID)
                            NewCheckBox.style.borderColor = 'lime'
                        } else {
                            SelectedFriends.splice(Index, 1) 
                            NewCheckBox.style.borderColor = '#393939'
                            DeclineBtn.classList.remove('disabled')
                        }
                        Text_Span.innerText = SelectedFriends.length
                        UpdateCheckboxes();
                    });
                });
            }

            function UpdateCheckboxes(){
                document.querySelectorAll('.polyplus-multiremovefr-checkbox').forEach(element => {
                    let Parent = element.parentElement.parentElement.parentElement.parentElement.parentElement
                    let DeclineBtn = Parent.querySelector('a.btn.btn-danger')
                    if (element.getAttribute('disabled')) {
                        element.removeAttribute('disabled')
                    }
                    if (SelectedFriends.IndexOf(DeclineBtn.getAttribute('data-user-id')) === -1) {
                        element.style.borderColor = '#393939'
                        DeclineBtn.classList.remove('disabled')
                        if (SelectedFriends.length >= 25) {
                            element.setAttribute('disabled', true)
                        }
                    } else {
                        DeclineBtn.classList.add('disabled')
                        element.style.borderColor = 'lime'
                    }
                })
            }
        }
    });
}, 100);