/**
 * Critical preloader CSS shown before mapsvg-bundle.css (and inside Shadow DOM).
 * Keep in sync with php/Front/MapPreloader.php.
 */

export const LOADING_STYLE_ATTR = "data-mapsvg-critical"
export const LOADING_STYLE_ATTR_VALUE = "loading"

export const LOADING_CRITICAL_CSS =
  ".mapsvg{position:relative;overflow:hidden}" +
  ".mapsvg-loading{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:max-content;height:max-content;z-index:100;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border-radius:5px;border:1px solid #ccc;background:#f5f5f2;box-shadow:0 0 20px rgba(0,0,0,.2);line-height:1}" +
  ".mapsvg-loading-text{display:inline-block;font-size:12px!important;line-height:1;color:#999;font-family:Helvetica,sans-serif}" +
  ".mapsvg-loading-text:empty{display:none}" +
  ".mapsvg-loading .spinner-border{display:block;flex-shrink:0;box-sizing:border-box;width:12px;height:12px;margin:0;color:#888;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mapsvg-spinner-border .75s linear infinite}" +
  "@keyframes mapsvg-spinner-border{to{transform:rotate(360deg)}}"

type StyleHost = {
  querySelector: (selector: string) => Element | null
  appendChild: (node: HTMLElement) => unknown
}

export function ensureLoadingCriticalCss(
  target?: StyleHost | null,
  createElement?: (tag: string) => HTMLElement,
): void {
  const host = target ?? (typeof document !== "undefined" ? document.head : undefined)
  if (!host) {
    return
  }
  const selector = `style[${LOADING_STYLE_ATTR}="${LOADING_STYLE_ATTR_VALUE}"]`
  if (host.querySelector(selector)) {
    return
  }

  const factory =
    createElement ??
    (typeof document !== "undefined" ? (tag: string) => document.createElement(tag) : undefined)
  if (!factory) {
    return
  }

  const style = factory("style")
  style.setAttribute(LOADING_STYLE_ATTR, LOADING_STYLE_ATTR_VALUE)
  style.textContent = LOADING_CRITICAL_CSS
  host.appendChild(style)
}