async function changeSite(site){
    console.log(site)
    const response = await fetch(`/changeSite`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            site: site,
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    location.reload(true)
}

// Beginning of site specific code!
var recipes = [];
document.addEventListener('DOMContentLoaded', async function() {
    recipes = await getRecipes()
    await replenishRecipes()
    await updatePaginationElement()
});

async function openAddRecipeModal() {
    UIkit.modal(document.getElementById('addRecipeModal')).show();
}

async function replenishRecipes() {
    if(!detailedList){
        await replenishRecipesTable()
    }

    if(detailedList){
        await replenishRecipesCards()
    }
}

async function replenishRecipesTable() {
    document.getElementById('recipes_list').innerHTML = ''

    let main_table = document.createElement('table')
    main_table.setAttribute('class', 'uk-table uk-table-striped')

    let table_head = document.createElement('thead')

    let head_row = document.createElement('tr')
    let nameCell = document.createElement('th')
    nameCell.innerHTML="Name"
    let descriptionCell = document.createElement('th')
    descriptionCell.innerHTML = 'Description'
    descriptionCell.setAttribute('class', 'uk-visible@m')
    let opsCell = document.createElement('th')
    opsCell.innerHTML = 'Operations'

    head_row.append(nameCell, descriptionCell, opsCell)
    table_head.append(head_row)
    main_table.append(table_head)


    let table_body = document.createElement('tbody')
    for(let i = 0; i < recipes.length; i++){
        console.log(recipes[i])


        
        let rp_items = recipes[i].rp_items
        let rp_items_count = 0
        let rp_items_availble = 0

        for(let y = 0; y < rp_items.length; y++){
            if (rp_items[y].quantity_on_hand >= rp_items[y].qty && rp_items[y].item_type == "sku"){
                rp_items_availble = rp_items_availble + 1
            }
            if (rp_items[y].item_type == "sku"){
                rp_items_count = rp_items_count + 1
            }
        }

        let table_row = document.createElement('tr')

        let nameCell = document.createElement('td')
        nameCell.innerHTML = `${recipes[i].name} ${rp_items_availble}/${rp_items_count}`
        nameCell.setAttribute('class', 'uk-width-1-4')
        let descriptionCell = document.createElement('td')
        descriptionCell.innerHTML = recipes[i].description
        descriptionCell.setAttribute('class', 'uk-text-truncate uk-table-expand uk-visible@m')
        let opsCell = document.createElement('td')
        opsCell.setAttribute('class', 'uk-width-1-4')


        let buttonGroup = document.createElement('div')
        buttonGroup.setAttribute('class', 'uk-button-group')

        let viewOp = document.createElement('a')
        viewOp.innerHTML = `view <span uk-icon="icon: eye"></span>`
        viewOp.setAttribute('class', 'uk-button uk-button-default uk-button-small')
        viewOp.href = `/recipes/view/${recipes[i].id}`

        let editOp = document.createElement('a')
        editOp.innerHTML = `edit <span uk-icon="icon: pencil"></span>`
        editOp.setAttribute('class', 'uk-button uk-button-default uk-button-small')
        editOp.href = `/recipes/edit/${recipes[i].id}`

        buttonGroup.append(viewOp, editOp)
        opsCell.append(buttonGroup)

        table_row.append(nameCell, descriptionCell, opsCell)
        table_body.append(table_row)
    }

    main_table.append(table_body)

    document.getElementById('recipes_list').append(main_table)

}

async function replenishRecipesCards() {
    document.getElementById('recipes_list').innerHTML = ''
    console.log('cards')

    for(let i=0; i < recipes.length; i++){

        let rp_items = recipes[i].rp_items
        let rp_items_count = 0
        let rp_items_availble = 0
        let badge_color = 'uk-label-success'

        for(let y = 0; y < rp_items.length; y++){
            if (rp_items[y].quantity_on_hand >= rp_items[y].qty && rp_items[y].item_type == "sku"){
                rp_items_availble = rp_items_availble + 1
            }
            if (rp_items[y].item_type == "sku"){
                rp_items_count = rp_items_count + 1
            }
        }

        if (rp_items_availble < rp_items_count){
            badge_color = 'uk-label-danger'
        }

        let main_div = document.createElement('div')
        main_div.setAttribute('class', 'uk-card uk-card-default uk-card-small uk-margin')

        let card_header_div = document.createElement('div')
        card_header_div.setAttribute('class', 'uk-card-header')
        card_header_div.style = "border: none;"

        let header_grid_div = document.createElement('div')
        header_grid_div.setAttribute('class', 'uk-flex-middle uk-grid uk-grid-small')

        let title_div = document.createElement('div')
        title_div.setAttribute('class', '')
        title_div.innerHTML = `<div class="uk-card-badge uk-label ${badge_color}">${rp_items_availble}/${rp_items_count} Ingredients</div>
            <h3 class="my-card uk-card-title uk-margin-remove-bottom">${recipes[i].name}</h3>`

        header_grid_div.append(title_div)
        card_header_div.append(header_grid_div)

        let body_div = document.createElement('div')
        body_div.setAttribute('class', 'uk-card-body')
        body_div.innerHTML = `<p>${recipes[i].description}</p>`
        body_div.style = 'border: none;'

        let footer_div = document.createElement('div')
        footer_div.setAttribute('class', 'uk-card-footer')
        footer_div.style = 'height: 40px; border: none;'

        let editOp = document.createElement('a')
        editOp.setAttribute('class', 'uk-button uk-button-small uk-button-primary')
        editOp.innerHTML = '<span uk-icon="icon: pencil"></span>   Edit'
        editOp.style = "margin-right: 10px;"
        editOp.href = `/recipes/edit/${recipes[i].id}`

        let viewOp = document.createElement('a')
        viewOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
        viewOp.innerHTML = '<span uk-icon="icon: eye"></span>    View'
        viewOp.style = "margin-right: 10px;"
        viewOp.href = `/recipes/view/${recipes[i].id}`

        let deleteOp = document.createElement('button')
        deleteOp.setAttribute('class', 'uk-button uk-button-small uk-button-danger')
        deleteOp.innerHTML = '<span uk-icon="icon: trash"></span>    Delete'
        deleteOp.onclick = async function() {
            await openDeleteRecipeModal(recipes[i].id)
        }
        
        
        footer_div.append(editOp, viewOp, deleteOp)

        main_div.append(card_header_div, body_div, footer_div)

        document.getElementById('recipes_list').append(main_div)
    }
}

var pagination_current = 1;
var pagination_end = 1;
var recipesLimit = 10;

async function getRecipes() {
    const url = new URL('/recipes/getRecipes', window.location.origin)
    url.searchParams.append('page', pagination_current);
    url.searchParams.append('limit', recipesLimit);
    const response = await fetch(url)
    data = await response.json()
    pagination_end = data.end
    return data.recipes
}

async function addRecipe() {
    let name = `${document.getElementById('addRecipeName').value}`
    let description = `${document.getElementById('addRecipeDescription').value}`

    const response = await fetch(`/recipes/addRecipe`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            recipe_name: name,
            recipe_description: description
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    recipes = await getRecipes()
    await replenishRecipes()
    await updatePaginationElement()
    UIkit.modal(document.getElementById('addRecipeModal')).hide();

}

var select_recipe_id_to_delete = 0
async function openDeleteRecipeModal(recipe_id) {
    select_recipe_id_to_delete = recipe_id
    document.getElementById('deleteRecipeConfirm').value = ""
    UIkit.modal(document.getElementById('deleteRecipeModal')).show();
}


async function deleteRecipe() {
    let confirm = String(document.getElementById('deleteRecipeConfirm').value)
    if (confirm === "DELETE"){
        const response = await fetch(`/recipes/api/deleteRecipe`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                recipe_id: select_recipe_id_to_delete
            }),
        });
        data =  await response.json();
        transaction_status = "success"
        if (data.error){
            transaction_status = "danger"
        }

        UIkit.notification({
            message: data.message,
            status: transaction_status,
            pos: 'top-right',
            timeout: 5000
        });
        recipes = await getRecipes()
        await replenishRecipes()
        await updatePaginationElement()
        UIkit.modal(document.getElementById('deleteRecipeModal')).hide();
    } else {
        UIkit.modal(document.getElementById('deleteRecipeModal')).hide();
        UIkit.notification({
            message: "Confirmation Incorrect!",
            status: "danger",
            pos: 'top-right',
            timeout: 5000
        });
    }
}

async function updatePaginationElement() {
    let paginationElement = document.getElementById("paginationElement");
    paginationElement.innerHTML = "";
    // previous
    let previousElement = document.createElement('li')
    if(pagination_current<=1){
        previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
        previousElement.classList.add('uk-disabled');
    }else {
        previousElement.innerHTML = `<a onclick="setPage(${pagination_current-1})"><span uk-pagination-previous></span></a>`;
    }
    paginationElement.append(previousElement)
    
    //first
    let firstElement = document.createElement('li')
    if(pagination_current<=1){
        firstElement.innerHTML = `<a>1</a>`;
        firstElement.classList.add('uk-disabled');
    }else {
        firstElement.innerHTML = `<a onclick="setPage(1)">1</a>`;
    }
    paginationElement.append(firstElement)
    
    // ...
    if(pagination_current-2>1){
        let firstDotElement = document.createElement('li')
        firstDotElement.classList.add('uk-disabled')
        firstDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(firstDotElement)
    }
    // last
    if(pagination_current-2>0){
        let lastElement = document.createElement('li')
        lastElement.innerHTML = `<a onclick=setPage(${pagination_current-1})>${pagination_current-1}</a>`
        paginationElement.append(lastElement)
    }
    // current
    if(pagination_current!=1 && pagination_current != pagination_end){
    let currentElement = document.createElement('li')
    currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${pagination_current}</strong></span></li>`
    paginationElement.append(currentElement)
    }
    // next
    if(pagination_current+2<pagination_end+1){
        let nextElement = document.createElement('li')
        nextElement.innerHTML = `<a onclick=setPage(${pagination_current+1})>${pagination_current+1}</a>`
        paginationElement.append(nextElement)
    }
    // ...
    if(pagination_current+2<=pagination_end){
        let secondDotElement = document.createElement('li')
        secondDotElement.classList.add('uk-disabled')
        secondDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(secondDotElement)
    }
    //end
    let endElement = document.createElement('li')
    if(pagination_current>=pagination_end){
        endElement.innerHTML = `<a>${pagination_end}</a>`;
        endElement.classList.add('uk-disabled');
    }else {
        endElement.innerHTML = `<a onclick="setPage(${pagination_end})">${pagination_end}</a>`;
    }
    paginationElement.append(endElement)
    //next button
    let nextElement = document.createElement('li')
    if(pagination_current>=pagination_end){
        nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
        nextElement.classList.add('uk-disabled');
    }else {
        nextElement.innerHTML = `<a onclick="setPage(${pagination_current+1})"><span uk-pagination-next></span></a>`;
    }
    paginationElement.append(nextElement)
}

async function setPage(pageNumber){
    pagination_current = pageNumber;
    recipes = await getRecipes()
    await replenishRecipes()
    await updatePaginationElement()
}

var detailedList = false
async function setViewMode() {
    detailedList = !detailedList;
    let toggle = document.getElementById('view_mode_toggle')
    if(detailedList){
        toggle.innerHTML = `Table <span uk-icon="icon: table"></span>`
    } else {
        toggle.innerHTML = `Cards <span uk-icon="icon: thumbnails"></span>`
    }
    await replenishRecipes()
    await updatePaginationElement()
}