import { loadEvents } from './events.js'
import { loadStatus } from './status.js'
import { initCuteTexture } from './cuteTexture.js'

// =================================== background texture
initCuteTexture()

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