const triggers = document.querySelectorAll('.cool > li');
const background = document.querySelector('.dropdownBackground');
const nav = document.querySelector('.top');

const handleEnter = (target1) => (target2) => (target3) => {
  target1.classList.add('trigger-enter');
  setTimeout(
    () =>
      target1.classList.contains('trigger-enter') &&
      target1.classList.add('trigger-enter-active'),
    150
  );
  target2.classList.add('open');

  const dropdown = target1.querySelector('.dropdown');
  const dropdownCoords = dropdown.getBoundingClientRect();
  const navCoords = target3.getBoundingClientRect();

  const coords = {
    height: dropdownCoords.height,
    width: dropdownCoords.width,
    top: dropdownCoords.top - navCoords.top,
    left: dropdownCoords.left - navCoords.left,
  };

  target2.style.setProperty('width', `${coords.width}px`);
  target2.style.setProperty('height', `${coords.height}px`);
  target2.style.setProperty(
    'transform',
    `translate(${coords.left}px, ${coords.top}px)`
  );
};

const handleLeave = (target1) => (target2) => {
  target1.classList.remove('trigger-enter', 'trigger-enter-active');
  target2.classList.remove('open');
};

triggers.forEach((trigger) =>
  trigger.addEventListener('mouseenter', () =>
    handleEnter(trigger)(background)(nav)
  )
);
triggers.forEach((trigger) =>
  trigger.addEventListener('mouseleave', () => handleLeave(trigger)(background))
);