// global 
var next_toast_id=1

function NewToast(data)
{
    console.log(data)
    // make new div, include data.alert as background colour, and data.message as toast body
    d_id='st' + String(next_toast_id)
    div='<div id="' + d_id + '"'
    if( data.persistent === true )
        div+=' data-bs-autohide="false"'
    if( data.job_id !== undefined )
        div+=' job_id=' + String(data.job_id)
    div +=' class="toast hide align-items-center border-0'
    if( data.alert == "success" || data.alert == "danger" )
        div += ' text-white'
    div += ' bg-' + data.alert
    div += `" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                `
    div += data.message
    div += '    </div>'
    if( data.cant_close !== true )
    {
        div += '    <button type="button" class="btn-close me-2 m-auto'
        if( data.alert === "success" || data.alert === "danger" )
                div += ' btn-close-white'
        div += ' " data-bs-dismiss="toast" aria-label="Close"></button>'
    }
    div += `
            </div>
        </div>
        `
    // insert this as the first element in the status_container
    $('#status_container').prepend(div)

    // make sure we have a new id for next toast
    next_toast_id++

    return d_id
}

// create a bs toast in the status_container
// can reuse any that are hidden, OR, create a new one by appending as needed (so we can have 2+ toasts on screen)
function StatusMsg(st)
{
    console.log('StatusMsg' + st )
    el=NewToast(st)
    $('#' + el ).toast("show")
    // if there is a job_id, then clear the message for it or it will be picked up again on reload
    // BUT, we dont want to do this immediately, should hook on close, but for
    // now, we will do this to get a first pass working
    if( st.job_id !== undefined )
    {
        console.log( 'set hidden.bs.toast handler for: ' + st.job_id )
        $('#' + el).on( 'hidden.bs.toast', 
            function() { 
                $.ajax( { type: 'POST', url: '/clearmsgforjob/'+st.job_id, success: function(data) { console.log('cleared job id' )} } )
            } )
    }
}

// this will make the active jobs badge red with a > 0 value, or navbar colours
// if 0 (effectively hiding it, but leaving the same width)
function SetActiveJobsBadge(num_jobs)
{
    if( num_jobs > 0 ) 
        $('#num_active_jobs').removeClass("invisible")
    else 
        $('#num_active_jobs').addClass("invisible")
    $('#num_active_jobs').html(num_jobs)
}

// this function is called either when we load and PA page and active jobs > 0
// OR, when a new job is created in the F/E and therefore active jobs > 0
// it keeps looking to see if the pa_job_manager has sent a response (via the DB)
// if so, it handles the response(s) with toast()s and updates the active job
// badge in the navbar.   If all jobs are complete it stops calling itself
// after a 1 second timeout
function CheckForJobs()
{
    $.ajax(
        {
            type: 'POST', url: '/checkforjobs', 
            success: function(data) { 
                data.sts.forEach( 
                    function(el)
                    {
                        StatusMsg(el)
                    }
                )
                SetActiveJobsBadge(data.num_active_jobs)
                if( data.num_active_jobs > 0 )
                {
                    setTimeout( function() { CheckForJobs() }, 1000 );
                }
            }, 
        } )
    return false;
}