// Prevent browser scroll.
window.addEventListener('wheel', function (event) {
    if (event.ctrlKey) {
        event.preventDefault();
    }
}, {
    passive: false
});
// Prevent default browser shortcuts.
window.addEventListener('keydown', function (event) {
    if (event.ctrlKey) {
        switch (event.key) {
            case '-':
            case '+':
            case '=':
            case 'z':
            case 'g':
                event.preventDefault();
                break;
        }
    }
    if (event.altKey) {
        event.preventDefault();
    }
});

// Unregister service workers and clear caches.
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(regs => {
        for (let reg of regs) reg.unregister();
    });
    caches.keys().then(keys => keys.forEach(key => caches.delete(key)));
}

const defaultThemeMode = 'system';

// Function to get data from IndexedDB
async function getFromIndexedDB(dbName, storeName, key) {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName);

        request.onupgradeneeded = function (event) {
            const db = event.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                console.log(`Creating objectStore ${storeName} in database ${dbName}`);
                db.createObjectStore(storeName);
            }
        };

        request.onsuccess = function (event) {
            const db = event.target.result;

            // Check if the object store exists
            if (!db.objectStoreNames.contains(storeName)) {
                resolve(null); // Return null if the store doesn't exist
                return;
            }

            const transaction = db.transaction(storeName, 'readonly');
            const store = transaction.objectStore(storeName);
            const getRequest = store.get(key);

            getRequest.onsuccess = function () {
                resolve(getRequest.result ?? null); // Return the value or null
            };

            getRequest.onerror = function () {
                reject(new Error('Error fetching key from IndexedDB'));
            };
        };

        request.onerror = function () {
            resolve(null); // Return null if the database can't be opened
        };
    });
}

// Function to determine the user's system theme
function getSystemTheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

function getBackgroundImageUrlUnsplash(backgroundImage) {
    const screenWidth = window.innerWidth;
    let backgroundImageUrl = `${backgroundImage}?auto=format&fit=crop`;
    if (screenWidth < 960) {
        backgroundImageUrl += '&w=960';
    } else if (screenWidth < 1920) {
        backgroundImageUrl += '&w=1920';
    } else if (screenWidth < 2560) {
        backgroundImageUrl += '&w=2560';
    }
    return backgroundImageUrl;
}

// Function to set the background image and overlays
async function setBackground() {
    let backgroundImage = await getFromIndexedDB('sharedpreferences', 'box', 'backgroundImage');
    let themeMode = await getFromIndexedDB('sharedpreferences', 'box', 'themeMode') || defaultThemeMode;

    // Use system theme if specified
    if (themeMode === 'system') {
        themeMode = getSystemTheme();
    }

    // Raw default background image URL from Unsplash.
    const originalDefaultBackgroundImage = 'https://images.unsplash.com/photo-1477346611705-65d1883cee1e';
    const defaultLightBackgroundImage = 'https://assets.codelessly.com/images/backgrounds/mountains-default-light-1920.webp';
    const defaultDarkBackgroundImage = 'https://assets.codelessly.com/images/backgrounds/mountains-default-dark-1920.webp';

    // Use the default Raw image if no background image is set or if the theme is not light.
    let backgroundImageUrl = getBackgroundImageUrlUnsplash(backgroundImage ?? originalDefaultBackgroundImage);
    console.log('Background image URL:', backgroundImageUrl);

    const loadingBackground = document.getElementById('loading-background');
    let innerHTML = themeMode === 'dark' ?
        `<img class="dark-img" src="proxy.php?url=https%3A%2F%2Fcodelessly.ai%2F%24%7BbackgroundImageUrl%7D" alt="" />
        <div class="overlay dark-overlay-top"></div>
        <div class="overlay dark-overlay-bottom"></div>` : `<img class="light-img" src="proxy.php?url=https%3A%2F%2Fcodelessly.ai%2F%24%7BbackgroundImageUrl%7D" alt="" />                <div class="overlay color-overlay"></div>
        <div class="overlay overlay-top"></div>
        <div class="overlay overlay-bottom"></div>`;

    loadingBackground.innerHTML = innerHTML;

    // Make the image visible after setting the src
    loadingBackground.querySelector('img').style.visibility = 'visible';

    // Apply theme mode (dark or light)
    if (themeMode === 'dark') {
        document.body.classList.add('dark-theme');
        document.body.classList.remove('light-theme');
    } else {
        document.body.classList.add('light-theme');
        document.body.classList.remove('dark-theme');
    }
}

// Set the background when the page loads
document.addEventListener('DOMContentLoaded', setBackground);

async function loadSpinner() {
    const response = await fetch('cupertino_activity_indicator.html');
    const spinnerHtml = await response.text();
    const spinnerContainer = document.querySelector('.loading-container');
    spinnerContainer.insertAdjacentHTML('afterbegin', spinnerHtml);
}

// Load the spinner when the page loads
document.addEventListener('DOMContentLoaded', loadSpinner);


function disableContextMenu() {
  document.addEventListener("contextmenu", preventHandler);
}

function enableContextMenu() {
  document.removeEventListener("contextmenu", preventHandler);
}

function preventHandler(event) {
  event.preventDefault();
}