// This is a simpler positionner for the dropdown for a select control
// We used to use popper for these, but it does not suppotr fractional pixel placements which
// means the dropdown does not appear aligned to the control when placed in a column-based layout
export function calculatePosition(dropdownList, component, width, placement) {
  const selectEl = component.$parent.$el;
  const r = selectEl.getBoundingClientRect();
  const p = placement || 'bottom-start';
  const docHeight = document.body.offsetHeight;
  const bottom = docHeight - window.scrollY - r.y - 1;
  let top;

  // If placement is not at the top, then position if underneath
  if (!p.includes('top')) {
    // Position is bottom
    top = r.y + r.height - 1;

    // Check to see if the dropdown would fall off the screen, if so, try putting it above
    const end = top + dropdownList.offsetHeight;

    if (end > window.innerHeight) {
      top = undefined;
    } else {
      top += window.scrollY;
    }
  }

  if (!top) {
    dropdownList.style.bottom = `${ bottom }px`;
    dropdownList.classList.add('vs__dropdown-up');
    selectEl.classList.add('vs__dropdown-up');
  } else {
    dropdownList.style.top = `${ top }px`;
    dropdownList.classList.remove('vs__dropdown-up');
    selectEl.classList.remove('vs__dropdown-up');
  }

  dropdownList.style.left = `${ r.x }px`;
  dropdownList.style.width = 'min-content';
  dropdownList.style.minWidth = `${ r.width }px`;
}