import { get, set } from 'idb-keyval';
import { deckSelector } from '@deckdeckgo/editor';
import { updateDeckBackground, updateSlideChart, updateSlideImages } from './sync.attributes.utils';
export const syncDeckBackground = async (data) => {
  // 1. We update the deck in the DOM
  updateDeckDOM(data);
  // 2. We replicate the same changes to the slides in the DOM
  await updateSlidesDOM(data);
  // 3. We update the indexedDB stored deck with the new downloadUrl.
  await updateDeckIDB(data);
};
export const syncSlideImage = async (data) => {
  const { slideId } = data;
  if (!slideId) {
    return;
  }
  // 1. We update the slide in the DOM
  await updateSlideImagesDOM(data);
  // 2. We update the indexedDB stored slide with the new downloadUrl.
  await updateSlideImagesIDB(data);
};
export const syncSlideChart = async (data) => {
  const { slideId } = data;
  if (!slideId) {
    return;
  }
  // 1. We update the slide in the DOM
  updateSlideChartDOM(data);
  // 2. We update the indexedDB stored slide with the new downloadUrl.
  await updateSlideChartIDB(data);
};
const updateDeckDOM = ({ storageFile }) => {
  const backgroundElement = document.querySelector(`${deckSelector} > *[slot="background"]`);
  const img = backgroundElement === null || backgroundElement === void 0 ? void 0 : backgroundElement.querySelector('deckgo-lazy-img');
  if (!img) {
    return;
  }
  const { downloadUrl, name } = storageFile;
  img.imgSrc = downloadUrl;
  img.imgAlt = name;
};
const updateSlideImagesDOM = async ({ slideId, storageFile, src }) => {
  const slideElement = document.querySelector(`${deckSelector} > *[slide_id="${slideId}"]`);
  const images = slideElement === null || slideElement === void 0 ? void 0 : slideElement.querySelectorAll('deckgo-lazy-img');
  await updateImagesDOM({ images, storageFile, src });
};
const updateSlideChartDOM = ({ slideId, storageFile }) => {
  const slideElement = document.querySelector(`${deckSelector} > *[slide_id="${slideId}"]`);
  if (!slideElement || !slideElement.nodeName || slideElement.nodeName.toLowerCase() !== 'deckgo-slide-chart') {
    return;
  }
  const { downloadUrl } = storageFile;
  slideElement.src = downloadUrl;
};
const updateSlidesDOM = async ({ storageFile, src }) => {
  const images = document.querySelectorAll(`${deckSelector} .deckgo-slide-container:not([custom-background]) *[slot="background"] deckgo-lazy-img`);
  await updateImagesDOM({ images, storageFile, src });
};
const updateImagesDOM = async ({ storageFile, images, src }) => {
  if (!images || images.length <= 0) {
    return;
  }
  const matchingImages = Array.from(images).filter((img) => img.imgSrc === src);
  if (!matchingImages || matchingImages.length <= 0) {
    return;
  }
  const updateImage = async (img) => {
    const { downloadUrl, name } = storageFile;
    img.imgSrc = downloadUrl;
    img.imgAlt = name;
  };
  const promises = Array.from(matchingImages).map((img) => updateImage(img));
  await Promise.all(promises);
};
const updateDeckIDB = async ({ storageFile, src, deckId }) => {
  const deck = await get(`/decks/${deckId}`);
  if (!deck) {
    throw new Error('Deck not found and that is really weird here.');
  }
  const updateDeck = updateDeckBackground({ deck, imgSrc: src, storageFile });
  await set(`/decks/${deck.id}`, updateDeck);
};
const updateSlideImagesIDB = async ({ storageFile, src, slideId, deckId }) => {
  const slide = await getSlide({ deckId, slideId });
  const updateSlide = updateSlideImages({
    slide,
    images: [
      {
        src,
        storageFile
      }
    ]
  });
  await setSlide({ deckId, slideId, slide: updateSlide });
};
const updateSlideChartIDB = async ({ storageFile, src, slideId, deckId }) => {
  const slide = await getSlide({ deckId, slideId });
  const updateSlide = updateSlideChart({
    slide,
    chart: {
      src,
      storageFile
    }
  });
  await setSlide({ deckId, slideId, slide: updateSlide });
};
const getSlide = async ({ deckId, slideId }) => {
  const slide = await get(`/decks/${deckId}/slides/${slideId}`);
  if (!slide) {
    throw new Error('Slide not found and that is really weird here.');
  }
  return slide;
};
const setSlide = async ({ deckId, slideId, slide }) => set(`/decks/${deckId}/slides/${slideId}`, slide);
