import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { EyeIcon, PenLine } from "lucide-react";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { useEditContext } from "../../client/editContext";
import { SimpleIconButton } from "../../ui/SimpleIconButton";
import { shouldRemoveNoOpSuggestion } from "../../reviews/suggestionContentChange";
import { enterSuggestionsMode, exitSuggestionsMode, } from "../../reviews/openCommentsFeedback";
import { PreviewDatePicker } from "../PreviewDatePicker";
import { Separator } from "../Separator";
import { FullscreenControl } from "./FullscreenControl";
import { CountBadge } from "../../../components/ui/badge";
const PREVIEW_DATE_PICKER_TRANSITION_MS = 200;
function AnimatedPreviewDatePicker({ show }) {
    const [shouldRender, setShouldRender] = useState(show);
    const [expanded, setExpanded] = useState(show);
    const [contentWidth, setContentWidth] = useState(0);
    const contentRef = useRef(null);
    useLayoutEffect(() => {
        if (!shouldRender)
            return;
        const updateWidth = () => {
            setContentWidth(Math.ceil(contentRef.current?.getBoundingClientRect().width ?? 0));
        };
        updateWidth();
        if (!contentRef.current || typeof ResizeObserver === "undefined") {
            return;
        }
        const observer = new ResizeObserver(updateWidth);
        observer.observe(contentRef.current);
        return () => observer.disconnect();
    }, [shouldRender]);
    useEffect(() => {
        if (show) {
            setShouldRender(true);
            const frame = requestAnimationFrame(() => {
                setExpanded(true);
            });
            return () => cancelAnimationFrame(frame);
        }
        setExpanded(false);
        const timeout = window.setTimeout(() => {
            setShouldRender(false);
        }, PREVIEW_DATE_PICKER_TRANSITION_MS);
        return () => window.clearTimeout(timeout);
    }, [show]);
    if (!shouldRender)
        return null;
    return (_jsx("div", { "aria-hidden": !show, inert: !show, className: "shrink-0 overflow-hidden transition-[width,margin-left,opacity] duration-200 ease-out motion-reduce:transition-none", style: {
            width: expanded ? contentWidth : 0,
            marginLeft: expanded ? 8 : 0,
            opacity: expanded ? 1 : 0,
        }, children: _jsx("div", { ref: contentRef, className: "w-max", children: _jsx(PreviewDatePicker, {}) }) }));
}
export function EditControls({ hideSuggestions, hidePreview, } = {}) {
    const editContext = useEditContext();
    if (!editContext)
        return null;
    const isPreview = editContext.mode === "preview";
    return (_jsxs(_Fragment, { children: [!hidePreview && (_jsxs("div", { className: "flex shrink-0 items-center", children: [isPreview && _jsx(Separator, { size: "large" }), _jsx(SimpleIconButton, { icon: _jsx(EyeIcon, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Preview", showTooltip: false, size: "large", "data-testid": "preview-mode-button", selected: isPreview, onClick: () => void editContext.changeMode(isPreview ? "edit" : "preview", {
                            reason: "toolbar",
                        }) }), _jsx(AnimatedPreviewDatePicker, { show: isPreview }), isPreview && _jsx(Separator, { size: "large" }), _jsx(FullscreenControl, {})] })), !hideSuggestions && _jsx(SuggestionsModeControl, {})] }));
}
export function SuggestionsModeControl({ leadingSeparator = false, } = {}) {
    const editContext = useEditContext();
    if (!editContext)
        return null;
    if (!editContext.showComments)
        return null;
    // Calculate total count of suggestions. No-op suggestions without comments
    // are hidden from the comments surface, so they must not inflate the badge.
    const comments = editContext.comments || [];
    const suggestionsCount = editContext.suggestedEdits?.filter((x) => x.status === "pending" &&
        !shouldRemoveNoOpSuggestion(x.oldValue, x.newValue, () => comments.filter((c) => c.suggestedEditId === x.id).length)).length || 0;
    const isSuggestionsMode = editContext.mode === "suggestions";
    const toggleSuggestions = () => {
        if (isSuggestionsMode) {
            exitSuggestionsMode(editContext, { reason: "toolbar" });
            return;
        }
        enterSuggestionsMode(editContext, { reason: "toolbar" });
    };
    const button = (_jsx(SimpleIconButton, { className: "relative", selected: isSuggestionsMode, icon: _jsx(PenLine, { strokeWidth: 1, className: "h-6 w-6 p-1" }), label: "Suggestions mode", size: "large", "data-testid": "suggestions-mode-button", onClick: toggleSuggestions, children: suggestionsCount > 0 && (_jsx(CountBadge, { className: "absolute -top-1 -right-1 min-w-[16px]", "data-affects-toolbar-height": true, children: suggestionsCount > 99 ? "99+" : suggestionsCount })) }));
    if (!leadingSeparator)
        return button;
    return (_jsxs(_Fragment, { children: [_jsx(Separator, { size: "large" }), button] }));
}
//# sourceMappingURL=EditControls.js.map