import * as PIXI from "pixi.js"
require("pixi-particles")

export const LoadCanVas = (emitter: any, myCanvas: HTMLCanvasElement) => {
  const color = ["orange", "purple", "white"]
  const objArt: any[] = []
  // tslint:disable-next-line:prefer-for-of
  for (let i = 0; i < color.length; i++) {
    objArt.push(utilInitObjectArt(color[i]))
  }

  const rendererOptions = {
    view: myCanvas,
    transparent: true
  }

  const stage = new PIXI.Container()
  const renderer = PIXI.autoDetectRenderer(
    myCanvas.offsetWidth,
    window.innerHeight,
    rendererOptions
  )

  // Calculate the current time
  let elapsed = Date.now()
  const update = () => {
    // Update the next frame
    requestAnimationFrame(update)
    const now = Date.now()
    emitter.update((now - elapsed) * 0.001)
    elapsed = now
    renderer.render(stage)
  }

  const loaderEmit = new PIXI.loaders.Loader()
  loaderEmit.load((loader, resources) => {
    const emitterContainer = new PIXI.Container()
    stage.addChild(emitterContainer)
    emitter = factoryParticleEmitter(emitterContainer, objArt, myCanvas)
    emitter.particleConstructor = PIXI.particles.AnimatedParticle
    emitter.updateOwnerPos(window.innerWidth / 2, window.innerHeight / 2)

    // const callBackDownListener = (event) => {
    //   if(!this.emitter) return;
    //   this.emitter.emit = true;
    //   this.emitter.resetPositionTracking();
    //   if(event.touches && event.touches.length == 1){
    //     console.log(event.touches[0])
    //     this.emitter.updateOwnerPos(event.touches[0].clientX || event.touches[0].pageX, event.touches[0].clientY || event.touches[0].pageY);
    //   } else {
    //     console.log(event.offsetX || event.layerX, event.offsetY || event.layerY)
    //     this.emitter.updateOwnerPos(event.offsetX || event.layerX, event.offsetY || event.layerY);
    //   }

    //   longPressTimer = setInterval(() => {
    //     console.log('longPress')
    //   }, 500);
    // }

    // let longPressTimer
    // // Click on the canvas to trigger
    // myCanvas.addEventListener('mousedown', callBackDownListener);
    // myCanvas.addEventListener('mouseup', callBackClearInterval);
    // myCanvas.addEventListener('touchstart', callBackDownListener);
    // myCanvas.addEventListener('touchend', callBackClearInterval);

    // function callBackClearInterval(event) {
    //   clearInterval(longPressTimer)
    // }

    update()
    return emitter
  })
}

const factoryParticleEmitter = (
  emitterContainer: PIXI.Container,
  imageArr: any,
  canvas: any
) => {
  return new PIXI.particles.Emitter(emitterContainer, imageArr, {
    alpha: {
      start: 2,
      end: 0
    },
    scale: {
      start: 0.4,
      end: 0.6,
      minimumScaleMultiplier: 0.5
    },
    color: {
      start: "ffffff",
      end: "ffffff"
    },
    speed: {
      start: 200,
      end: 100
    },
    startRotation: {
      min: 260,
      max: 280
    },
    rotationSpeed: {
      min: 0,
      max: 10
    },
    lifetime: {
      min: 1,
      max: 2
    },
    blendMode: "normal",
    frequency: 0.1,
    emitterLifetime: 0.15,
    maxParticles: 100,
    pos: {
      x: 0,
      y: 0
    },
    addAtBack: true,
    spawnType: "point"
  })
}

const utilInitObjectArt = (color: string) => {
  const frames: any[] = []
  for (let i = 1; i <= 13; i++) {
    const val = i < 10 ? "0" + i : i
    const objImg = {
      texture:
        "/ui-assets/images/adore/heart-" + color + "/effect" + val + ".png",
      count: 1
    }
    frames.push(objImg)
  }
  return {
    framerate: "matchLife",
    textures: frames
  }
}