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

import Icon from "./Icon";

// Einfacher, gestalteter Dialog (nutzt die modal-Klassen der Vorlage).
export default function Modal({ title, onClose, children, footer, wide = false }) {
  // Nur schliessen, wenn der Klick auch AUF dem Hintergrund begonnen hat.
  // Markiert man Text in einem Feld und zieht dabei über den Rand hinaus,
  // liegt das Mouseup auf dem Hintergrund; der Klick feuert dann auf dem
  // gemeinsamen Elternelement und schloss den Dialog mitten im Markieren.
  const startAussen = useRef(false);
  // An den Seitenkoerper, nicht an die Stelle im Baum: Steht der Aufrufer in
  // einem Element mit `transform` – jede Kachel der Uebersicht tut das –, waere
  // das sonst der Bezugsrahmen fuer `position: fixed`, und der Dialog sitzt
  // eingeklemmt in der Kachel statt ueber der Seite.
  return createPortal(
    <div
      className="modal-backdrop"
      onMouseDown={(e) => { startAussen.current = e.target === e.currentTarget; }}
      onClick={(e) => {
        if (e.target === e.currentTarget && startAussen.current) onClose();
        startAussen.current = false;
      }}
    >
      <div className="modal" role="dialog" aria-modal="true" style={{ maxWidth: wide ? 640 : 480 }}>
        <div className="modal-head">
          <h2 style={{ margin: 0 }}>{title}</h2>
          <button className="btn-icon" style={{ marginLeft: "auto" }} onClick={onClose} title="Schließen">
            <Icon name="close" size={18} />
          </button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="btn-pair">{footer}</div>}
      </div>
    </div>,
    document.body,
  );
}