"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import classNames from "classnames";
import Button from "jt-design-system/es/button";
import Tooltip from "jt-design-system/es/tooltip";
import { Maximize, Minimize } from "./icons";
import css from "./editable-map.module.css";
export default function FullScreenButton({ containerRef, fullScreen, setFullScreen, isInDialog, markerListOpened, }) {
    React.useEffect(() => {
        const sync = () => setFullScreen(Boolean(document.fullscreenElement));
        document.addEventListener("fullscreenchange", sync);
        return () => {
            document.removeEventListener("fullscreenchange", sync);
        };
    }, [setFullScreen]);
    if (!document.fullscreenEnabled) {
        return null;
    }
    const toggle = () => {
        if (document.fullscreenElement) {
            document.exitFullscreen();
            return;
        }
        containerRef.current?.requestFullscreen();
    };
    const classes = classNames(css.fullScreenButton, {
        [css.fullScreenButtonInDialog]: isInDialog,
        [css.fullScreenButtonOpened]: markerListOpened,
    });
    return (_jsx(Tooltip, { content: fullScreen ? "Quitter le plein écran" : "Plein écran", contentProps: { side: "left" }, children: _jsx(Button, { type: "button", variant: "secondary", className: classes, onClick: toggle, compact: true, children: fullScreen ? _jsx(Minimize, {}) : _jsx(Maximize, {}) }) }));
}
