"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { useEditContext } from "../client/editContext";
import { SingleEditView } from "./SingleEditView";
import { CompareView } from "./CompareView";
import { EditorSlotContextProvider, useEditorSlotContext, } from "./editorSlotContext";
import { CloseButton } from "../../components/ui/close-button";
/**
 * Editor slot component that owns its PageViewContext and slot UI.
 * SingleEditView is kept pure (no slot UI) so it can be used in CompareView.
 */
export function EditorSlot({ slotId, itemDescriptor, name, compareView, className, refreshToken, }) {
    const editContext = useEditContext();
    const { registerSlotContext, unregisterSlotContext, setActiveSlot, activeSlotId, } = editContext ?? {};
    const isActive = activeSlotId === slotId;
    const [isHovering, setIsHovering] = useState(false);
    const containerRef = useRef(null);
    const [formEditorCollapsed, setFormEditorCollapsed] = useState(false);
    const slotContext = useEditorSlotContext({
        slotId,
        itemDescriptor,
        refreshToken,
    });
    const activate = () => {
        const activeNow = editContext?.getActiveSlotId?.() ?? activeSlotId;
        if (activeNow !== slotId) {
            setActiveSlot?.(slotId);
        }
    };
    useEffect(() => {
        if (!slotContext || !registerSlotContext || !unregisterSlotContext)
            return;
        registerSlotContext(slotId, slotContext);
        return () => unregisterSlotContext(slotId);
    }, [slotId, slotContext, registerSlotContext, unregisterSlotContext]);
    if (!editContext || !slotContext)
        return null;
    const showCloseButton = (isHovering || editContext.isMobile) && editContext.editorSlots.length > 1;
    const slotCloseButton = showCloseButton ? (_jsx(CloseButton, { label: "Close editor", onClick: (e) => {
            e.stopPropagation();
            editContext.closeEditorSlot(slotId);
        }, className: "border-border-default hover:border-highlight-100 border bg-white/90 backdrop-blur-sm hover:bg-white" })) : null;
    return (_jsx(EditorSlotContextProvider, { value: slotContext, children: _jsx("div", { ref: containerRef, "data-editor-slot": "true", "data-slotid": slotId, "data-itemid": itemDescriptor.id, className: `relative ${className || ""} ${isActive
                ? "cursor-default opacity-100 grayscale-0"
                : "cursor-pointer opacity-90 brightness-[0.98] grayscale-[0.1]"} transition-[filter,opacity] duration-300 ease-in-out`, onMouseDownCapture: activate, onClick: activate, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: slotContext.compareMode ? (_jsx(CompareView, { slotCloseButton: slotCloseButton })) : (_jsx(SingleEditView, { name: name, compareView: compareView, onActivate: activate, isActive: slotContext.isActive, formEditorCollapsed: formEditorCollapsed, setFormEditorCollapsed: setFormEditorCollapsed, slotCloseButton: slotCloseButton })) }) }));
}
//# sourceMappingURL=EditorSlot.js.map