import { Scene, WebGLRenderTarget } from 'three';
import * as facemesh from '@tensorflow-models/facemesh';

import store from '@/store/';

import View from '@/webgl/common/View';
import Video from './Video';
import Face from './Face';

const sceneView = new Scene();
const view = new View();
const video = new Video();
const faces = Array.apply(null, Array(10)).map(() => {
  return new Face();
});
const renderTarget1 = new WebGLRenderTarget();

export default class WebGLContent {
  constructor() {}
  start(viewTexture, faceTexture) {
    const { state } = store;

    view.start(renderTarget1.texture, viewTexture);
    faces.forEach(face => {
      face.setUv(facemesh.FaceMesh.getUVCoords());
      face.setTexture(faceTexture);
      sceneView.add(face);
    });
    state.scene.add(view);
    sceneView.add(video);
    video.start();
  }
  show() {
    view.show();
  }
  async destroy() {
    const { state } = store;

    await view.hide();
    state.scene.remove(view);
    sceneView.remove(video);
    faces.forEach(face => {
      sceneView.remove(face);
    });
  }
  async update(time, predictions) {
    const { state } = store;

    for (let index = 0; index < faces.length; index++) {
      const face = faces[index];
      if (predictions !== null && predictions[index]) {
        face.visible = true;
        face.update(time, predictions[index]);
      } else {
        face.visible = false;
      }
    }

    view.update(time);

    // Render the post effect.
    state.renderer.setRenderTarget(renderTarget1);
    state.renderer.render(sceneView, state.camera);

    state.renderer.setRenderTarget(null);
  }
  resize() {
    const { resolution } = store.state;

    video.resize();
    faces.forEach(face => {
      face.resize();
    });
    renderTarget1.setSize(resolution.x, resolution.y);
  }
}