@extends("base")

@section('scripts')
<script>

function download_array(data) {
    // Create a blob of the text content
    const blob = new Blob([data.join('\n')], { type: 'text/plain' });

    // Create a temporary URL for the blob
    const url = URL.createObjectURL(blob);

    // Create a download link
    const a = document.createElement('a');
    a.href = url;
    a.download = 'seed_api_'+(new Date()).toDateString().replaceAll(' ', '_')+'.txt';
    a.click();

    // Revoke the URL to release memory
    URL.revokeObjectURL(url);
}

const run_query = () => {
    const csrf_token = document.querySelector('form>input[name=_token]').value;
    const url = '/run-query';

    const payload = {};
    const query = document.querySelector('textarea[id=query]');
    const inputs = document.querySelectorAll('form[id=manage-mailboxes-form] input');
    payload['query'] = query.value;
    for(let input of inputs) {
        switch(input.type) {
            case 'number':
                payload[input.id] = input.value;
                break;
            case 'checkbox':
                payload[input.id] = input.checked;
                break;
            default:
                break;
        }
    }

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrf_token,
        },
        body: JSON.stringify(payload)
    })
    .then(res => {
        if(!res.ok) {
            return console.log(err);
        }
    })
    .catch(err => {
        console.log(err);
    })

    refresh_progress();
}


const fetch_progress = async (intervalID) => {
    const csrf_token = document.querySelector('form>input[name=_token]').value;
    const start_at = document.querySelector('#start_at').value;
    const end_at = document.querySelector('#end_at').value;
    const url = `/get-progress?start_at=${start_at}&end_at=${end_at}`;

    const response =  await fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrf_token,
        }
    });

    if(!response.ok) {
        return console.log('Something went wrong');
        clearInterval(intervalID);
    }

    const data = await response.json();

    if(data.current_index) {
        document.querySelector('#progress-index').innerHTML = data.current_index;
    }
    
    if(data.end_at) {
        document.querySelector('#progress-total').innerHTML = data.end_at;
    }


    // Stop refreshing once finished
    if(data.finished == true) {
        clearInterval(intervalID);
        try {
            document.querySelector('#query-progress div.spinner-grow').classList.add('d-none');
        } finally {
            // 
        }
    }
}

const refresh_progress = () => {
    const queryProgress = document.querySelector('#query-progress');
    if(!queryProgress) return;
    
    console.log('Refreshing..');
    queryProgress.classList.remove('d-none');
    // 

    const intervalID = setInterval(() => {
        console.log('Refreshing..');

        fetch_progress(intervalID);
    }, 1000);


    document.querySelector('#progress-index').innerHTML = 1;
    try {
        document.querySelector('#query-progress div.spinner-grow').classList.remove('d-none');
    } finally {
        // 
    }
}

const init = () => {
    // SPAM
    const in_spam = document.querySelector('#in_spam')
    const nspam_container = document.querySelector('#nspam_container');
    if(in_spam && nspam_container) {
        in_spam.addEventListener('change', (e) => {
            if(e.target.checked) nspam_container.classList.remove('invisible');
            else nspam_container.classList.add('invisible');

            for (let _input of nspam_container.querySelectorAll('input')) {
                _input.checked = e.target.checked;
            }
        })
    }

    // INBOX
    const in_nbox = document.querySelector('#in_nbox')
    const nbox_container = document.querySelector('#nbox_container');
    if(in_nbox && nbox_container) {
        in_nbox.addEventListener('change', (e) => {
            if(e.target.checked) nbox_container.classList.remove('invisible');
            else nbox_container.classList.add('invisible');

            for (let _input of nbox_container.querySelectorAll('input')) {
                _input.checked = e.target.checked;
            }
        })
    }


    // // all_mail
    const in_allmail = document.querySelector('#in_allmail')
    const allmail_container = document.querySelector('#allmail_container');
    if(in_allmail && allmail_container) {
        in_allmail.addEventListener('change', (e) => {
            if(e.target.checked) allmail_container.classList.remove('invisible');
            else allmail_container.classList.add('invisible');

            for (let _input of allmail_container.querySelectorAll('input')) {
                _input.checked = e.target.checked;
            }
        })
    }

    const manageMailboxesForm = document.getElementById('manage-mailboxes-form');
    manageMailboxesForm.addEventListener('submit', (e) => {
        e.preventDefault();
        run_query();
    });

    // Refresh tokens validity
    check_accounts_token_validity_btn = document.querySelector('#check_accounts_token_validity');
    check_accounts_token_validity_btn.addEventListener('click', (e) => {
        // Show loader
        e.target.disabled = true;
        document.querySelector('.accounts-token-validity>div.spinner-grow').classList.remove('d-none')

        fetch('/check-tokens-validity')
        .then(res => {
            // Stop loading
            document.querySelector('.accounts-token-validity>div.spinner-grow').classList.add('d-none')
            e.target.disabled = false;
            if(!res.ok) {
                return;
            }

            // Process returned data
            res.json().then(data => {
                const valid =  data.filter(x => x.status != 'revoked').length
                const invalid =  data.filter(x => x.status == 'revoked').length

                document.querySelector('#valid-accounts').innerText = valid;
                document.querySelector('#invalid-accounts').innerText = invalid;
                
                for(p of document.querySelectorAll('.accounts-token-validity>p.alert')) p.classList.remove('d-none');
            })
        })
        .catch(res => {
            // Stop loading
            document.querySelector('.accounts-token-validity>div.spinner-grow').classList.add('d-none');
            e.target.disabled = false;
        })
    })


    // Export accounts
    export_btn = document.querySelector('#export_accounts');
    export_btn.addEventListener('click', (e) => {
        // Show loader
        e.target.disabled = true;
        e.target.querySelector('span.spinner-grow').classList.remove('d-none');

        const start_at = document.querySelector('#start_at').value;
        const end_at = document.querySelector('#end_at').value;

        fetch(`/export-accounts?start_at=${start_at}&end_at=${end_at}`)
            .then(res => {
                // Stop loading
                e.target.querySelector('span.spinner-grow').classList.add('d-none');
                e.target.disabled = false;
                if(!res.ok) {
                    return;
                }

                // Process returned data
                res.json().then(data => {
                    download_array(data.map(x => x.email));
                })
            })
            .catch(res => {
                // Stop loading
                e.target.querySelector('span.spinner-grow').classList.add('d-none');
                e.target.disabled = false;
            })
    })
}

// subject:MxToolbox Blacklist Summary

init();
</script>
@endsection

@section("main")
    <main class="container">
        <form class="row" action="" id="manage-mailboxes-form">
            @csrf
            <div class="col-sm-3">
                @include("partials.sidebar")
            </div>

            <div class="col-sm-9">
                <h1 class="text-center fs-3 fw-medium">Modify action</h1>

                <class class="">
                    <div class="d-inline-flex align-items-start accounts-token-validity">
                        <button type="button" class="btn btn-success p-2 m-2" id="check_accounts_token_validity">Refresh tokens validity</button>
                        <p class="alert d-none alert-success p-2 m-2" role="alert">Valid: <span id="valid-accounts">--</span></p>
                        <p class="alert d-none alert-warning p-2 m-2" role="alert">Invalid: <span id="invalid-accounts">--</span></p>
                        <div class="m-2 d-none spinner-grow text-info" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                    <!-- Horizontal line -->
                    <hr class=""/>
                    <div class="d-inline-flex align-items-start">
                        <label for="start_at" class="p-2 m-2">Start at</label>
                        <input placeholder="1" value="1" id="start_at" class="alert alert-primary p-2 m-2" style="width: 80px;" type="number" />

                        <label for="end_at" class="p-2 m-2">End at</label>
                        <input placeholder="100" value="100" id="end_at" class="alert alert-primary p-2 m-2" style="width: 80px;" type="number" />

                        <button type="button" id="export_accounts" class="btn btn-success p-2 m-2" style="margin-left:25px!important; width: fit-content;">
                            <span class="d-none spinner-grow text-primary spinner-grow-sm" role="status" aria-hidden="true"></span>
                            Download <i class="fa fa-solid fa-download"></i>
                        </button>
                    </div>
                    <hr class="mt-4 pb-4"/>

                    <!-- Actions -->
                    <div class="d-inline-flex align-items-start">

                        <!-- Spam actions -->
                        <div class="">
                            <div class="form-check mb-4">
                                <input checked class="form-check-input" type="checkbox" value="" id="in_spam">
                                <label class="form-check-label" for="in_spam">
                                    IN SPAM
                                </label>
                            </div>

                            <div class="d-block" id="nspam_container">
                                <!--
                                    <div class="mb-1">
                                        <input class="form-check-input" type="checkbox" value="" id="spam_important">
                                        <label class="form-check-label" for="spam_important">
                                            Important <i class="fa fa-flag"></i>
                                        </label>
                                    </div>

                                    <div class="mb-1">
                                        <input class="form-check-input" type="checkbox" value="" id="spam_star">
                                        <label class="form-check-label" for="spam_star">
                                            Star <i class="fa fa-star"></i>
                                        </label>
                                    </div>

                                    <div class="mb-1">
                                        <input class="form-check-input" type="checkbox" value="" id="spam_add_contact">
                                        <label class="form-check-label" for="spam_add_contact">
                                            Add to contact <i class="fa fa-user-plus"></i>
                                        </label>
                                    </div>
                                -->

                                <div class="">
                                    <input class="form-check-input" type="checkbox" value="" id="spam_not_spam" checked>
                                    <label class="form-check-label" for="spam_not_spam">
                                        Not spam <i class="fa fa-heart"></i>
                                    </label>
                                </div>
                            </div>
                        </div>


                        <!-- Inbox actions -->
                        <div style="margin-left: 60px">
                            <div class="form-check mb-4">
                                <input checked class="form-check-input" type="checkbox" value="" id="in_nbox">
                                <label class="form-check-label" for="in_nbox">
                                    IN INBOX
                                </label>
                            </div>

                            <div class="d-block" id="nbox_container">
                                <div class="mb-1">
                                    <input class="form-check-input" type="checkbox" value="" id="nbox_important">
                                    <label class="form-check-label" for="nbox_important">
                                        Important <i class="fa fa-flag"></i>
                                    </label>
                                </div>

                                <div class="mb-1">
                                    <input class="form-check-input" type="checkbox" value="" id="nbox_star">
                                    <label class="form-check-label" for="nbox_star">
                                        Star <i class="fa fa-star"></i>
                                    </label>
                                </div>

                                <div class="mb-1">
                                    <input class="form-check-input" type="checkbox" value="" id="nbox_add_filter">
                                    <label class="form-check-label" for="nbox_add_filter">
                                        Add Filter <i class="fa fa-filter"></i>
                                    </label>
                                </div>

                                <div class="mb-1">
                                    <input class="form-check-input" type="checkbox" value="" id="nbox_archive">
                                    <label class="form-check-label" for="nbox_archive">
                                        Archive <i class="fa fa-archive"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <!-- code by imad -->
                        <!-- All MAIL actions -->
                        <div style="margin-left: 60px">
                            <div class="form-check mb-4">
                                <input checked class="form-check-input" type="checkbox" value="" id="in_allmail">
                                <label class="form-check-label" for="in_allmail">
                                    IN ALL MAIL
                                </label>
                            </div>

                            <div class="d-block" id="allmail_container">
                                <div class="mb-1">
                                    <input class="form-check-input" type="checkbox" value="" id="all_mail_add_filter">
                                    <label class="form-check-label" for="all_mail_add_filter">
                                        Add Filter <i class="fa fa-filter"></i>
                                    </label>
                                </div>

                            </div>
                        </div>
                    </div>
                    
                    <hr class="mt-4 pb-4"/>

                    <!-- Query, submit and progress -->
                    <div class="mb-8 form-group">
                        <div class="d-inline-flex" style="width:100%">
                            <textarea class="form-control" style="width:50%" placeholder="Query.." id="query"></textarea>
                            <button type="submit" class="btn btn-success d-inline-flex" style="height:40px; margin-top:auto; margin-left:10px;">Run <i class="fa fa-rocket m-1 "></i></button>
                        </div>
                    </div>

                    <div id="query-progress" class="alert d-none alert-secondary p-1" role="alert" style="width:200px; margin-top:30px;">
                        <div class="d-flex">
                            <p class="mt-1">Progress</p>
                            <div class="m-2 mt-0 d-none spinner-grow text-info" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                        <p class=""><span id="progress-index" ></span> /<span id="progress-total"></span></p>
                    </div>
                </div>

                
            </div>
        </form>
    </main>
@endsection