// Open the database
const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1);

    request.onerror = () => reject(request.error);
    request.onsuccess = () => resolve(request.result);

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore('backgrounds', { keyPath: 'id' });
    };
  });
};

// Modified Read Data from IndexedDB
const readData = async () => {
  const selectedBackground = localStorage.getItem('selectedBackground');
  if (!selectedBackground) {
    return null;
  }

  const db = await openDB();
  const tx = db.transaction('backgrounds', 'readonly');
  const store = tx.objectStore('backgrounds');
  const request = store.get(selectedBackground);

  return await new Promise((resolve, reject) => {
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
};

const updateBackground = async () => {
  try {
    const data = await readData();
    if (!data) {
      console.log('No data found in IndexedDB.');

      const container = document.getElementById('media-container');
      const currentMedia = container.querySelector('.current-media');
      if (currentMedia) {
        currentMedia.remove();
      }
      return;
    }

    const url = URL.createObjectURL(data.blob);
    const container = document.getElementById('media-container');

    // Create new element and set properties
    let newElement;
    if (data.type === 'image') {
      newElement = document.createElement('img');
      newElement.src = url;
      newElement.alt = 'Uploaded content';
    } else if (data.type === 'video') {
      newElement = document.createElement('video');
      newElement.src = url;
      newElement.autoplay = true;
      newElement.loop = true;
      newElement.muted = true;
    }

    // Mark the old element for removal
    const oldElement = container.querySelector('.current-media');
    if (oldElement) {
      oldElement.classList.remove('current-media');
      oldElement.classList.add('old-media');
    }

    // Add the new element and mark it as current
    newElement.classList.add('current-media');
    container.appendChild(newElement);

    // Delay removal of old element
    setTimeout(() => {
      const oldMedia = container.querySelector('.old-media');
      if (oldMedia) {
        oldMedia.remove();
      }
    }, 100); // 0.1 second delay
  } catch (error) {
    console.error('An error occurred:', error);
  }
};

// Main function to run on page load
const main = async () => {
  await updateBackground();  // Initial background update

  // Listen for changes to local storage
  window.addEventListener('storage', async (event) => {
    if (event.key === 'selectedBackground') {
      await updateBackground();  // Update background if 'selectedBackground' changes
    }
  });
};

// Run the main function when the document is ready
document.addEventListener('DOMContentLoaded', main);