"use client";

import { useSyncExternalStore } from "react";
import { createPortal } from "react-dom";

/** Bez pretplate — samo razlikuje server (false) od pregledača (true). */
const bezPromene = () => () => {};

/**
 * Kači modal direktno na `<body>`, van stabla u kom je pozvan.
 *
 * ZAŠTO POSTOJI: `position: fixed` nije uvek vezan za ekran. Čim bilo koji
 * predak ima `backdrop-filter`, `transform`, `filter`, `perspective`,
 * `will-change` ili `contain`, on postaje novi referentni okvir i `fixed`
 * dete se pozicionira u odnosu na NJEGA.
 *
 * U adminu to radi klasa `.surface` (`backdrop-filter: blur(22px)`) koju nose
 * sve kartice. Dijalog otvoren iz dugmeta unutar duge forme se zato centrirao
 * po visini CELE kartice, pa je trebalo skrolovati da bi se video — umesto da
 * stoji na sredini ekrana.
 *
 * Portal to rešava u korenu: dete više nema takvog pretka, pa `fixed` znači
 * ono što treba da znači — ekran, tačno tamo gde korisnik jeste.
 */
export function ModalPortal({ children }: { children: React.ReactNode }) {
  // Portal se pravi tek u pregledaču — na serveru `document` ne postoji.
  const uPregledacu = useSyncExternalStore(
    bezPromene,
    () => true,
    () => false,
  );

  if (!uPregledacu) return null;
  return createPortal(children, document.body);
}

export default ModalPortal;