import GrayscalePNGTransformer from './png-lib';

(async () => {
  const image = document.getElementById('target');

  // Fetch the original image
  const response = await fetch('turtle.png');
  // Retrieve its body as ReadableStream
  const body = response.body;
  // Create a gray-scaled PNG stream out of the original
  const rs = body.pipeThrough(new TransformStream(new GrayscalePNGTransformer()));
  // Create a new response out of the stream
  const newResponse = new Response(rs);
  // Create an object URL for the response
  const blob = await newResponse.blob();
  // create URL
  const url = URL.createObjectURL(blob);
  // Update image
  image.src = url;
})();

window.addEventListener('load', async() => {
	if("serviceWorker" in window.navigator) {
		try {

		await window.navigator.serviceWorker.register('/serviceworker.js')

		} catch (error) {
			console.error(error)
		}
	}
})

addEventListener('install', event => {
  skipWaiting();
  event.waitUntil(async function () {
    const cache = await caches.open(staticCacheName);
    await cache.addAll(toCache);
  }());
});

addEventListener('activate', event => {
  event.waitUntil(async function () {
    const keys = await caches.keys();
    await Promise.all(
      keys.map(key => {
        if (key !== staticCacheName) return caches.delete(key);
      })
    );
  }());
});

event.respondWith(async function() {

      if (event.request.method !== 'GET') return;
     
      const cachedResponse = await caches.match(url)
      if (cachedReponse) return cachedResponse;
      
      
      // Stream you content
      
      //..........
 })

const readableStream = new ReadableStream({
  start(controller) {
    /* … */
  },

  pull(controller) {
    /* … */
  },

  cancel(reason) {
    /* … */
  },
});

async function streamArticle(request, url) {
  const stream = new ReadableStream({
     start(controller) {
      
       const startFetch = caches.match('/media/plg_system_mittpwa/header.html');
       const endFetch = caches.match('/media/plg_system_mittpwa/footer.html');
       const middleFetch = fetch(url).then(response => {
         if (!response.ok && response.status != 404) {
           return caches.match('/media/plg_mittpwa/error.html');
         }
         return response;
       }).catch(err => caches.match('/media/plg_system_mittpwa/offline.html'));

       function pushStream(stream) {
         const reader = stream.getReader();

         return reader.read().then(function process(result) {
           if (result.done) return;
           controller.enqueue(result.value);
           return reader.read().then(process);
         });
       }

       startFetch
         .then(response => pushStream(response.body))
         .then(() => middleFetch)
         .then(response => pushStream(response.body))
         .then(() => endFetch
         .then(response => pushStream(response.body))
         .then(() => controller.close());
     }
   });

   return new Response(stream, {
     headers: {'Content-Type': 'text/html; charset=utf-8'}
   });
 }

addEventListener('fetch', event => {
  let url = new URL(event.request.url);
  
   event.respondWith(async function() {

     //.....Cached content

     let parts 
     parts = [
       
        caches.match('/media/plg_system_mittpwa/header.include'),
       
        fetch(url)
        .catch(() => caches.match('/media/plg_system_mittpwa/offline.include')),
       
        caches.match('/media/plg_system_mittpwa/footer.include')
      ];
    

      const {done, response} = await mergeResponses(parts);
    
      event.waitUntil(done);

      // Return the merged response.
      return response;
      
    }());
});

async function mergeResponses(responsePromises, headers) {
  const readers = responsePromises.map(p => Promise.resolve(p).then(r => r.body.getReader()));
  let doneResolve;
  let doneReject;
  const done = new Promise((r, rr) => {
    doneResolve = r;
    doneReject = rr;
  });
  
  const readable = new ReadableStream({
    async pull(controller) {
      const reader = await readers[0];
      try {
        const {done, value} = await reader.read();
        if (done) {
          readers.shift();
          
          if (!readers[0]) {
            controller.close();
            doneResolve();
            return;
          }
          return this.pull(controller);
        }
        controller.enqueue(value);
      }
      catch (err) {
        doneReject(err);
        throw err;
      }
    },
    cancel() {
      doneResolve();
    }
  });

async function mergeResponses(responsePromises, headers) {
  const {readable, writable} = new TransformStream();
  
  const done = (async function() {
    for await (const response of responsePromises) {
      await response.body.pipeTo(writable, {preventClose: true});
    }
    writable.getWriter().close();
  })();

  return {
    done,
    response: new Response(readable, {
      headers: headers || (await responsePromises[0]).headers
    })
  };
}

addEventListener('activate', event => {
  event.waitUntil(async function() {
    // Feature-detect
    if (self.registration.navigationPreload) {
      // Enable navigation preloads!
      await self.registration.navigationPreload.enable();
    }
  }());
});

addEventListener('fetch', event => {
  event.respondWith(async function() {
    // Respond from the cache if we can
    const cachedResponse = await caches.match(event.request);
    if (cachedResponse) return cachedResponse;

    // Else, use the preloaded response, if it's there
    const response = await event.preloadResponse;
    if (response) return response;

    // Else try the network.
    return fetch(event.request);
  }());
});

// Try to use the preload
const networkContent = Promise.resolve(event.preloadResponse)
  // Else do a normal fetch
  .then(r => r || fetch(includeURL))
  // A fallback if the network fails.
  .catch(() => caches.match('/article-offline.include'));

const parts = [
  caches.match('/article-top.include'),
  networkContent,
  caches.match('/article-bottom')
];