import * as scrawl from "https://unpkg.com/[email protected]";

// Grab a handle to the canvas element in the DOM
const canvas = scrawl.library.canvas.mycanvas;

// Create some filters which we can use for the demo background
scrawl.makeFilter({
    name: "grayscale",
    method: "grayscale"
  })
  .clone({
    name: "sepia",
    method: "sepia"
  })
  .clone({
    name: "invert",
    method: "invert"
  })
  .clone({
    name: "red",
    method: "red"
  });

scrawl.makeFilter({
  name: "pixelate",
  method: "pixelate",
  tileWidth: 20,
  tileHeight: 20,
});

scrawl.makeFilter({
  name: "background-blur",
  method: "gaussianBlur",
  radius: 20
});

scrawl.makeFilter({
  name: "body-blur",
  method: "gaussianBlur",
  radius: 10
});

// TensorFlow functionality - we'll handle everything in a raw asset object, which a Scrawl-canvas Picture entity can then use as its source
let myAsset = scrawl.makeRawAsset({
  name: "tensorflow-model-interpreter",

   // We're only interested in the pixel allocations generated by the tensorflow model for this demo
  userAttributes: [
    {
      key: "data",
      defaultValue: [],
      setter: function (item) {
        if (item && item.width && item.height && item.data) {
          this.canvasWidth = item.width;
          this.canvasHeight = item.height;
          this.data = item.data;
          this.dirtyData = true;
        }
      }
    },
    // We'll use these additional attributes in the update function, below
    {
      key: "canvasWidth",
      defaultValue: 0,
      setter: () => {}
    },
    {
      key: "canvasHeight",
      defaultValue: 0,
      setter: () => {}
    }
  ],

  // Every time the TensorFlow model sends back new data, we can process it here in our RawAsset object
  updateSource: function (assetWrapper) {
    
    // The RawAsset object supplies its own canvas element and context engine, alongside the attributes we defined earlier
    const { element, engine, canvasWidth, canvasHeight, data } = assetWrapper;

    if (canvasWidth && canvasHeight && data) {
      
      // Create a new image asrtray and image data object for each data update
      const segLength = canvasWidth * canvasHeight,
        imageDataLen = segLength * 4,
        imageArray = new Uint8ClampedArray(imageDataLen);

      for (let i = 0, o = 0; i < segLength; i++) {
        o = i * 4 + 3;
        if (data[i]) imageArray[o] = 255;
      }

      const iData = new ImageData(imageArray, canvasWidth, canvasHeight);

      // Clear the canvas, resizing it if required
      element.width = canvasWidth;
      element.height = canvasHeight;

      engine.putImageData(iData, 0, 0);
    }
  }
});

// The forever loop function, which captures the TensorFlow model's output and passes it on to our raw asset for processing
const perform = function (net) {
  
  net.segmentPerson(video.source)
  .then((data) => {
    myAsset.set({ data });
    perform(net);
  })
  .catch((e) => console.log('Perform error', e.message));
};


// Import and use livestream ... convenience handles for the media stream asset and the Scrawl-canvas entitys
let video, myBackground, myOutline;


// Capture the media stream
scrawl.importMediaStream({
    name: "device-camera",
    audio: false
})
.then((mycamera) => {
  
  video = mycamera;

  // This fixes the issue in Firefox where the media stream will crash TensorFlow if the stream's video element's dimensions have not been set
  video.source.width = "1280";
  video.source.height = "720";

  // Take the media stream and display it in our canvas element
  myBackground = scrawl.makePicture({
    name: "background",
    asset: mycamera.name,
    order: 2,

    width: "100%",
    height: "100%",

    copyWidth: "80%",
    copyHeight: "80%",
    copyStartX: "10%",
    copyStartY: "10%",
    
    filters: ['pixelate'],
    globalCompositeOperation: "destination-over"
  });

  myBackground.clone({
    name: "body",
    order: 1,
    filters: [],
    globalCompositeOperation: "source-in"
  });

  // We need confirmation that the media stream is working before we start the model running
  video.source.addEventListener('loadeddata', (event) => {

    // Start the TensorFlow model
    bodyPix.load()
    .then((net) => {
    
      // Display the visual generated by our raw asset
      myOutline = scrawl.makePicture({
        name: "outline",
        asset: "tensorflow-model-interpreter",
        order: 0,

        width: "100%",
        height: "100%",

        copyWidth: "80%",
        copyHeight: "80%",
        copyStartX: "10%",
        copyStartY: "10%",

        // We blur here to make the outline merge into the background
         filters: ["body-blur"]
      });

      // Invoke the forever loop
      perform(net);
    })
    .catch((e) => console.log('BodyPix error', e.message));
  });
})
.catch((e) => console.log('Media stream error', e.message));


// Create the Scrawl-canvas Display cycle animation
scrawl.makeRender({
  name: "demo-animation",
  target: canvas
});


// User interaction - Event listeners
scrawl.addNativeListener(
  
  ["input", "change"],
  
  (e) => {
    e.preventDefault();
    e.returnValue = false;

    if (e && e.target) {
      const id = e.target.id,
        val = e.target.value;

      if ("backgroundFilter" === id) {
        
        myBackground.clearFilters();
        if (val) myBackground.addFilters(val);
        
      } else {
        
        if ("1" === val) myOutline.addFilters("body-blur");
        else myOutline.clearFilters();
      }
    }
  },
  ".controlItem"
);

// Set DOM form initial input values
document.querySelector("#backgroundFilter").value = "pixelate";
document.querySelector("#outlineFilter").value = "1";