import { loadEvents } from './events.js'
import { loadStatus } from './status.js'
import { scanlinesAnimation } from './cuteTexture.js'
import { noiseAnimation } from './cuteTexture.js'
import { loadCanvas } from './cuteTexture.js'





// =================================== background texture
loadCanvas();
let backgroundVideo = document.querySelector('main > #background');

let proxyTarget = {};
let proxyHandler = {

};
export let statusProxy = new Proxy(proxyTarget, {
  set(obj, prop, value){
    if(prop === 'lolStatus'){
      if (value){
        backgroundVideo.style.visibility = 'visible';
        scanlinesAnimation();
          return true
      } else {
        backgroundVideo.style.visibility = 'collapse';
        noiseAnimation();
          return true
      }
    }
  }
})

statusProxy.lolStatus = false;

//console.log(proxyTarget.lolStatus);


// ======================================== events & statut d'ouverture
loadEvents();
loadStatus();

// ======================================== floating event window

let target = document.querySelector('#posterWindow');

let startTarget = target.querySelector('.posterTitle');

console.log('selected target :', startTarget);

let startX, startY;
let clicked = false;

startTarget.addEventListener('mousedown', (event) => {
  startX = event.pageX;
  startY = event.pageY;
  clicked = true;
  console.log('clicking...')
})

document.addEventListener('mousemove', (event) => {
  if(clicked){
    console.log('moving...')
    let currentX = event.pageX;
    let currentY = event.pageY;
    let moveX = target.offsetLeft + currentX - startX;
    target.style.left =  moveX + 'px';
    let moveY = target.offsetTop + currentY - startY;
    target.style.top = moveY + 'px';
    startX = currentX;
    startY = currentY;
  }
});

document.addEventListener('mouseup', () => {
  console.log('STOP !')
  clicked = false;
})


//================================ tentative de gestion des écran tactiles
startTarget.addEventListener('touchstart', (event) => {
  startX = event.pageX;
  startY = event.pageY;
  clicked = true;
  console.log('touching...')
})

document.addEventListener('touchmove', (event) => {
  if(clicked){
    console.log('moving...')
    let currentX = event.pageX;
    let currentY = event.pageY;
    let moveX = target.offsetLeft + currentX - startX;
    target.style.left =  moveX + 'px';
    let moveY = target.offsetTop + currentY - startY;
    target.style.top = moveY + 'px';
    startX = currentX;
    startY = currentY;
  }
});

document.addEventListener('touchend', () => {
  console.log('STOP !')
  clicked = false;
})