const CACHEROOTLOCATION = 'https://site.truefaithjewelry.com/ytimes/dynamic-content/';

$(document).ready(function () {
    const query = `close-out=yes`;
    if (query) {
        if(!document.getElementById('dynamicContentStyle')) {
            $("head").append(`
                <style id=dynamicContentsStyle>
                #ytimesFilteredContent .contents.loading {
                    min-height: 10em;
                    grid-template-columns: auto;
                    align-content: center;
                }
                .loading .thinkingText {
                    display: block;
                    text-align: center;
                    font-size: xx-large;
                    animation: blink 0.5s linear infinite;
                }
                @keyframes blink {
                    0%, 100% {
                        opacity: 1;
                    }
                    50% {
                        opacity: 0;
                    }
                }
                </style>
            `);
            $("#ytimesFilteredContent .contents").html("<div class=thinkingText hidden>Loading...</div>");
        }

        $("#ytimesFilteredContent .contents").addClass("loading");

        let cacheData = {
            "cmd": "r",
            "query": query
        }
        getCache(cacheData)
            .then(function(data) {
                if(data) {
                    console.log("Cache hit");
                    useData(data);
                } else {
                    loadData(query);
                }
            })
            .catch(function(data) {
                loadData(query);
            });
    } else {
        $("#ytimesFilteredContent .contents").removeClass("loading");
        console.log("query parameter is not found in the URL.");
    }
});

function loadData(query) {
    let url = `https://www.ytimes.net/catalog/store-folders/yhst-17707300211888/custom/query.php?query=${query}`;
    fetch(url)
        .then((response) => {
            if (!response.ok) {
                throw new Error(
                    `Network response was not ok: ${response.status}`
                );
            }
            return response.json(); // Parse the JSON response
        })
        .then((data) => {
            // Process the JSON data here
            if(typeof(data) == 'string') {
                $("#ytimesFilteredContent").prepend(data);
                $("#ytimesFilteredContent .contents").removeClass("loading");
            } else {
                writeCache(query, data);
                useData(data);
            }
        })
        .catch((error) => {
            $("#ytimesFilteredContent .contents").removeClass("loading");
            console.error("Error:", error);
        });
}

function useData(data) {
    YTIMES.pageObjects = data;
    $("#ytimesFilteredContent .contents").removeClass("loading");
    $("#ytimesFilteredContent .contents").html(buildPage(data));
    //$.getScript("https://turbifycdn.com/ty/cdn/yhst-17707300211888/ytimes-filtered-contents.js?v=53");
    $.getScript("https://www.ytimes.net/catalog/store-folders/yhst-17707300211888/custom/ytimes-filtered-contents.js?v=53");
}

async function getCache(data) {
    const url = `${CACHEROOTLOCATION}cache.php`;
  
    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });
  
      if (response.ok) {
        return await response.json();
      } else {
        return null;
      }
    } catch (error) {
      return null;
    }
}
  
function writeCache(query, data) {
    const dataToSend = {
        "cmd" : "w",
        "query" : query,
        "data" : data
    }
    const jsonData = JSON.stringify(dataToSend);

    const url = `${CACHEROOTLOCATION}cache.php`;

    // Create a fetch request to send the data asynchronously
    fetch(url, {
        method: 'POST',
        body: jsonData,
        headers: {
            'Content-Type': 'application/json',
        },
    }).then(response => {
        if (response.ok) {
            console.log('Data sent to cache successfully.');
        } else {
            console.error('Failed to send data to cache.');
        }
    })
    .catch(error => {
        console.error('writeCache Error:', error);
    });

}

function buildPage(data) {
    let itemsContainer = '';
    const formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    data.forEach(element => {
        const CANBEPERSONALIZED = 2;
        const INIMAGEAREA = 1;
        const NOTINIMAGEAREA = 0;

        let flagsTop = getFlags(element, INIMAGEAREA);
        let flagsBottom = getFlags(element, NOTINIMAGEAREA);
        let canBePersonalized = element.flags[CANBEPERSONALIZED] != undefined ? element.flags[CANBEPERSONALIZED] : '';
        let formattedSalePrice = formatter.format(element['sale'] || element['price']);
        let formattedRegPrice = 
            element['sale'] && element['price'] 
            ? 
            `<div class=reg>
                ${formatter.format(element['price'])}
            </div>` 
            : '';
        itemsContainer += `
            <div class=item data-id=${element['id']}>
                <div class=image>
                    <a href=${element['id']}.html>
                        <img width=300 height=300 src=${element['img']} alt="${element['name']}" loading=lazy>
                        ${flagsTop}
                    </a>
                </div>
                <div class=name>
                    <a href=${element['id']}.html>${element['name']}</a>
                    <span class=code>
                        Item #: ${element['code']}
                    </span>
                </div>
                <div class=price>
                    <div class=sale>
                        ${formattedSalePrice}
                    </div>
                    ${formattedRegPrice}
                </div>
                ${flagsBottom}
                ${canBePersonalized}
            </div>`;
    });
    return itemsContainer;
}

function getFlags(data, inImageArea) {
    if(data.flags[inImageArea] != undefined && data.flags[inImageArea] != '') {
        return (`<div class=itemFlags>${data.flags[inImageArea]}</div>`);
    } else {
        return '';
    }
}