import { registerComponents } from "@helpers/alpine";
import { navigateTo } from "@helpers/location";
import { Alpine } from "./base/setup";

import components from "@components/**/*.js";
registerComponents(components);

// Global JS navigation handler.
// Optionally uses Turbo for the page navigation.
window.addEventListener("app:navigate", (event) => {
  const url = event.detail.url;
  if (url) {
    delete event.detail.url;
    navigateTo(url, event.detail);
  }
});

// Uodate the value of the `--app-height` css variable
// when the viewport size changes. To help work around the
// issues when using 100vh on mobile safari (https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8)
function setAppHeightProperty() {
  document.documentElement.style.setProperty(
    "--app-height",
    `${window.innerHeight}px`
  );
}
window.addEventListener("resize", setAppHeightProperty);
setAppHeightProperty();

Alpine.start();