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
});

// MediaPipe 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: "mediapipe-model-interpreter",

  // MediaPipe gives us imageData objects which we can drawImage into the RawAsset canvas element
  userAttributes: [
    {
      key: "mask",
      defaultValue: false,
      setter: function (item) {
        item = item.segmentationMask ? item.segmentationMask : false;

        if (item) {
          this.canvasWidth = item.width;
          this.canvasHeight = item.height;
          this.mask = item;
          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 MediaPipe model sends back new data, we can process it here in our RawAsset object
  updateSource: function (assetWrapper) {
    const { element, engine, canvasWidth, canvasHeight, mask } = assetWrapper;

    if (canvasWidth && canvasHeight && mask) {
      // Clear the canvas, resizing it if required
      element.width = canvasWidth;
      element.height = canvasHeight;

      engine.drawImage(mask, 0, 0, canvasWidth, canvasHeight);
    }
  }
});

// The forever loop function, which captures the MediaPipe model's output and passes it on to our raw asset for processing
const perform = function (mask) {
  myAsset.set({ mask });

  // This code only runs once, when the model is up-and-running
  if (!myOutline)
    myOutline = scrawl.makePicture({
      name: "outline",
      asset: "mediapipe-model-interpreter",
      order: 0,

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

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

      filters: ["body-blur"]
    });
};

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

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

    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"
    });

    // Start the MediaPipe model
    model = new SelfieSegmentation({
      locateFile: (file) =>
        `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`
    });

    model.setOptions({ modelSelection: 1 });
    model.onResults(perform);

    // Use MediaPipe's camera functionality to get updates to the forever loop
    const mediaPipeCamera = new Camera(video.source, {
      onFrame: async () => {
        await model.send({ image: video.source });
      },

      width: 1280,
      height: 720
    });

    mediaPipeCamera.start();
  })
  .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.set({
            visibility: true
          });

          myBackground.addFilters(val);
        } else {
          myBackground.set({
            visibility: false
          });
        }
      } 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";