const { ref, computed } = Vue;
const { useHardwareConcurrency } = VueAdaptiveUtils;
const { chunk: chunkArray } = _;

/*
* Creates a web worker without external scripts.
*/
const createWorker = (() => { 
  let blob;
  
  return function () {
    if (blob) {
      return new Worker(blob);
    }
    
    
    const scriptBlob = new Blob(
      Array.prototype.map.call(
        document.querySelectorAll('script[type="text\/js-worker"]'),
        function (scr) { return scr.textContent; }
      ),
      { type: 'text/javascript' }
    );
    
    blob = window.URL.createObjectURL(scriptBlob)

    // Create a new worker containing all "text/js-worker" scripts.
    return new Worker(blob);
  }
})()


Vue.createApp({
  setup() {
    const { concurrency } = useHardwareConcurrency();
    const selectedConcurrency = ref(concurrency.value);
    const original = ref('');
    const result = ref('');
    const input = ref(null);
    const canvas = ref(null);
    const runs = ref([]);
    const concurrencyLevels = computed(() => {
      return new Array(concurrency.value).fill().map((_, idx) => idx + 1).filter(i => i === 1 || i % 2 === 0)
    })
    let context = null;
    concurrency;

    function createImage(src) {
      return new Promise(resolve => {
        const img = new Image();
        img.src = src;
        img.onload = () => {
          canvas.value.width = img.naturalWidth;
          canvas.value.height = img.naturalHeight;
          resolve(img);
        };
      });
    }

    async function processFile(e) {
      const file = e ? e.target.files[0] : input.value.files[0];
      result.value = '';
      if (!file) {
        return;
      }
      
      const src = URL.createObjectURL(file);
      original.value = src;
      const img = await createImage(src);
      if (!context) {
        context = canvas.value.getContext('2d');
      }

      context.drawImage(img, 0, 0);
      const width = canvas.value.width;
      const height = canvas.value.height;
      const imageData = context.getImageData(0, 0, width, height);

      // split the amout of work on the available threads
      const chunks = chunkArray(imageData.data, imageData.data.length / selectedConcurrency.value);
      const data = { length: 0 };
      const start = performance.now();
      // spawn a service worker for each thread
      for (let i = 0; i < chunks.length; i++) {
        const worker = createWorker();
        let iterId = i;
        worker.onmessage = e => {
          data[i] = e.data.data;
          data.length++;
          
          // last item
          if (data.length === chunks.length) {
            console.log(imageData.data.length);
            context.putImageData(new ImageData(new Uint8ClampedArray(Array.from(data).flat()), width, height), 0, 0);
            runs.value.push({
              concurrency: chunks.length,
              elapsed: (performance.now() - start).toFixed(2),
              timestamp: Date.now()
            });

            result.value = canvas.value.toDataURL();
          }
        };
  
        worker.postMessage({ data: chunks[i] });
      }
    }

    return {
      processFile,
      original,
      canvas,
      runs,
      concurrency,
      selectedConcurrency,
      result,
      concurrencyLevels,
      input
    };
  }
}).mount('#app')