const body = document.getElementById('body')
const media = document.querySelector("video");
const sun = document.getElementById('sun')

let saturation = 1;
let freq = 1000;
let gain = 0;
let audioSource = null;
let filter = null;

function showVideo() {
  sun.style.display = 'none';
  media.style.display = 'flex';
}

function hideVideo() {
  sun.style.display = 'flex';
  media.style.display = 'none';
}

function increaseValues() {
  saturation += 1;
  gain += 5;
  freq += 1000;
}

function createFilter() {
  if (audioSource === null) {
    const context = new AudioContext();
    audioSource = context.createMediaElementSource(media);
    filter = context.createBiquadFilter();
    audioSource.connect(filter);
    filter.connect(context.destination);
    filter.type = "lowshelf";
  }

  return filter;
}

sun.addEventListener('click', (event) => {
  event.preventDefault();

  const filter = createFilter();
  filter.frequency.value = freq;
  filter.gain.value = gain;

  showVideo();
  media.play();
  media.style.filter = `saturate(${saturation})`;

  increaseValues();
})

media.addEventListener('ended', () => {
  hideVideo();
  media.currentTime = 0;
})