particlesJS.load('particles-js', '/particles.json', () =>
    console.log('callback - particles.js config loaded')
);
//
// //canvas of the particles
// const particleWrapper = document.querySelector('#particles-js')
// console.log(document.body.scrollHeight, particleWrapper.style.height)

const thresholdFidelity = 500;

// const particleObserver = new IntersectionObserver(entries => {
//     // note - if the boundingClientRect.y is negative, then they are scrolling down
//     // note - since using id, only 1 entry
//     console.log(entries[0])
//     const {intersectionRatio, boundingClientRect} = entries[0];
//     if (intersectionRatio !== 1) {
//         console.log(particleWrapper.style)
//         particleWrapper.style.top = `${parseFloat(particleWrapper.style.top.replace('px', '')) - boundingClientRect.top}px`;
//     }
// }, {
//     threshold: .5
// });
// particleObserver.observe(particleWrapper)

// mutation observer for the video element
const videoTitle = document.querySelector('#video-title');
console.log(videoTitle);


const observer = new IntersectionObserver(entries => {
    // note - if the boundingClientRect.y is negative, then they are scrolling down
    // note - since using id, only 1 entry
    const {intersectionRatio, boundingClientRect} = entries[0];
    if (intersectionRatio !== 1 && boundingClientRect.y <= 0) {
        videoTitle.currentTime = 5 - 2 * intersectionRatio;
    } else {
        videoTitle.currentTime = 2;
    }
}, {
    threshold: [...Array(thresholdFidelity).keys()].map(num => num/thresholdFidelity)
});

// after two seconds pause the video
setTimeout(() => {
    console.log('fired')
    videoTitle.pause();
    videoTitle.currentTime = 2;
    observer.observe(videoTitle);
}, 2500)

// math for interactive conic border on weekly specials
const conicElement = document.querySelector('.conic-border');
window.addEventListener('mousemove', ({ clientX, clientY }) => {
    const { x, y, width, height } = conicElement.getBoundingClientRect();
    const dx = clientX - (x + 0.5 * width);
    const dy = clientY - (y + 0.5 * height);
    const angle = Math.atan2(dy, dx) * 180 / Math.PI;

    conicElement.style.setProperty('--startDeg', `${angle + 90}deg`);
}, false);