import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Check, ChevronDown, Monitor, Smartphone, Table } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { Button } from "../../../components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../../components/ui/dropdown-menu";
import { cn } from "../../../lib/utils";
import { useEditContext } from "../../client/editContext";
import { DEVICE_CHANGE_EVENT } from "../../page-viewer/pageViewContext";
export function DeviceSwitchToolbar({ className, iconClassName = "h-5 w-5", buttonSize = "large", pageViewContext: pageViewContextOverride, showFormOption = true, triggerTestId = "viewport-mode-switcher-button", }) {
    const editContext = useEditContext();
    const [, setDeviceChangeCounter] = useState(0);
    const [open, setOpen] = useState(false);
    const closeTimeoutRef = useRef(null);
    const hoverOpenedRef = useRef(false);
    const clearCloseTimeout = () => {
        if (closeTimeoutRef.current) {
            clearTimeout(closeTimeoutRef.current);
            closeTimeoutRef.current = null;
        }
    };
    const openOnHover = () => {
        clearCloseTimeout();
        hoverOpenedRef.current = true;
        setOpen(true);
    };
    const closeAfterHover = () => {
        clearCloseTimeout();
        closeTimeoutRef.current = setTimeout(() => {
            hoverOpenedRef.current = false;
            setOpen(false);
        }, 150);
    };
    const handleOpenChange = (nextOpen) => {
        if (nextOpen) {
            clearCloseTimeout();
        }
        else {
            hoverOpenedRef.current = false;
        }
        setOpen(nextOpen);
    };
    useEffect(() => {
        const handler = () => {
            setDeviceChangeCounter((x) => x + 1);
        };
        window.addEventListener(DEVICE_CHANGE_EVENT, handler);
        return () => window.removeEventListener(DEVICE_CHANGE_EVENT, handler);
    }, []);
    useEffect(() => {
        return () => {
            if (closeTimeoutRef.current) {
                clearTimeout(closeTimeoutRef.current);
            }
        };
    }, []);
    if (!editContext || editContext.isMobile)
        return null;
    const activeSlotContext = editContext.getActiveSlotContext();
    const pageViewContext = pageViewContextOverride ?? activeSlotContext?.primaryPageViewContext;
    if (!pageViewContext)
        return null;
    const device = pageViewContext.device;
    const setActiveSlotDevice = (nextDevice) => {
        const currentPageViewContext = pageViewContextOverride
            ? pageViewContext
            : (editContext.getActiveSlotContext()?.primaryPageViewContext ??
                pageViewContext);
        currentPageViewContext.setDevice(nextDevice);
    };
    const firstMobileDeviceName = editContext.configuration.devices[0]?.name;
    const activeMode = !device
        ? showFormOption
            ? "form"
            : "desktop"
        : device === "desktop"
            ? "desktop"
            : "mobile";
    const triggerIconClassName = iconClassName || (buttonSize === "small" ? "h-4 w-4" : "h-5 w-5");
    const activeModeConfig = activeMode === "desktop"
        ? {
            icon: Monitor,
            label: "Desktop",
        }
        : activeMode === "mobile"
            ? {
                icon: Smartphone,
                label: "Mobile",
            }
            : {
                icon: Table,
                label: "Form",
            };
    const ActiveIcon = activeModeConfig.icon;
    const optionIconClassName = "h-4 w-4";
    const options = [
        {
            key: "desktop",
            label: "Desktop",
            icon: Monitor,
            testId: "desktop-viewport-button",
            disabled: false,
            onSelect: () => setActiveSlotDevice("desktop"),
        },
        {
            key: "mobile",
            label: "Mobile",
            icon: Smartphone,
            testId: "mobile-viewport-button",
            disabled: !firstMobileDeviceName,
            onSelect: () => {
                if (firstMobileDeviceName) {
                    setActiveSlotDevice(firstMobileDeviceName);
                }
            },
        },
        ...(showFormOption
            ? [
                {
                    key: "form",
                    label: "Form",
                    icon: Table,
                    testId: "form-viewport-button",
                    disabled: false,
                    onSelect: () => setActiveSlotDevice(""),
                },
            ]
            : []),
    ];
    return (_jsx("div", { className: cn("flex shrink-0 items-center gap-1", className), children: _jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: handleOpenChange, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: buttonSize === "small" ? "xs" : "sm", className: cn("text-neutral-grey-100 border-transparent! bg-transparent! shadow-none! hover:border-transparent! hover:bg-transparent! hover:shadow-none!", buttonSize === "small" ? "h-7 gap-1 px-2" : "h-8 gap-1.5 px-2.5"), "data-testid": triggerTestId, "aria-label": "Viewport mode", onPointerEnter: openOnHover, onPointerLeave: closeAfterHover, onPointerDownCapture: (event) => {
                            if (open && hoverOpenedRef.current) {
                                event.preventDefault();
                                event.stopPropagation();
                            }
                        }, children: [_jsx(ActiveIcon, { className: triggerIconClassName, strokeWidth: 1 }), _jsx("span", { children: activeModeConfig.label }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-50", strokeWidth: 1 })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-32", "data-testid": "viewport-mode-switcher-menu", onPointerEnter: openOnHover, onPointerLeave: closeAfterHover, children: options.map((option) => {
                        const OptionIcon = option.icon;
                        const selected = activeMode === option.key;
                        return (_jsxs(DropdownMenuItem, { disabled: option.disabled, "data-testid": option.testId, onClick: option.onSelect, className: "justify-between", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(OptionIcon, { className: optionIconClassName, strokeWidth: 1 }), _jsx("span", { children: option.label })] }), _jsx(Check, { className: cn("h-4 w-4 shrink-0", selected ? "opacity-100" : "opacity-0"), strokeWidth: 1 })] }, option.key));
                    }) })] }) }));
}
//# sourceMappingURL=DeviceSwitchToolbar.js.map