/**
 * @example
 * scrollPrimeVueDialogToFirstFormError();
 * // Scrolls a PrimeVue dialog to the first element that has the `js-form-error` class or the `p-message-error` class
 *
 * @example
 * scrollPrimeVueDialogToFirstFormError(".some-class");
 * // Scrolls a PrimeVue dialog to the first element that matches the specified selector
 *
 * By default, this function scrolls to 70 pixels above the element that it
 * finds. This amount can be adjusted by using a CSS custom property named
 * `--virgodev-bazaar-scroll-primevue-dialog-to-first-form-error-subtraction-amount`,
 * for example:
 *
 * :root {
 *   --virgodev-bazaar-scroll-primevue-dialog-to-first-form-error-subtraction-amount: 100;
 * }
 */
export default function scrollPrimeVueDialogToFirstFormError(
  querySelector = ".js-form-error, .p-message-error"
): void {
  const dialogContent = document.querySelector(".p-dialog-content");

  if (dialogContent) {
    const firstError = dialogContent.querySelector(querySelector);

    if (firstError) {
      let subtractionAmount: string | number = window
        .getComputedStyle(firstError)
        .getPropertyValue(
          "--virgodev-bazaar-scroll-primevue-dialog-to-first-form-error-subtraction-amount"
        );

      if (/^\d+$/.test(subtractionAmount)) {
        subtractionAmount = parseInt(subtractionAmount, 10);
      } else {
        subtractionAmount = 70;
      }      

      const dialogContentDomRect = dialogContent.getBoundingClientRect()
      const firstErrorDomRect = firstError.getBoundingClientRect()

      dialogContent.scrollTo({
        top: dialogContent.scrollTop + (firstErrorDomRect.top - dialogContentDomRect.top) - 70,
        left: dialogContent.scrollLeft + (firstErrorDomRect.left - dialogContentDomRect.left),
        behavior: "smooth",
      });
    }
  }
}