import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Monitor, Smartphone, Table } from "lucide-react";
import { useEffect, useState } from "react";
import { cn } from "../../../lib/utils";
import { useEditContext } from "../../client/editContext";
import { DEVICE_CHANGE_EVENT } from "../../page-viewer/pageViewContext";
import { SimpleIconButton } from "../../ui/SimpleIconButton";
export function DeviceSwitchToolbar({ className, iconClassName = "h-6 w-6 p-1", buttonSize = "large", }) {
    const editContext = useEditContext();
    const [, setDeviceChangeCounter] = useState(0);
    useEffect(() => {
        const handler = () => {
            setDeviceChangeCounter((x) => x + 1);
        };
        window.addEventListener(DEVICE_CHANGE_EVENT, handler);
        return () => window.removeEventListener(DEVICE_CHANGE_EVENT, handler);
    }, []);
    if (!editContext || editContext.isMobile)
        return null;
    const activeSlotContext = editContext.getActiveSlotContext();
    const pageViewContext = activeSlotContext?.primaryPageViewContext;
    if (!pageViewContext)
        return null;
    const device = pageViewContext.device;
    const setActiveSlotDevice = (nextDevice) => {
        const currentPageViewContext = editContext.getActiveSlotContext()?.primaryPageViewContext ??
            pageViewContext;
        currentPageViewContext.setDevice(nextDevice);
    };
    const firstMobileDeviceName = editContext.configuration.devices[0]?.name;
    return (_jsxs("div", { className: cn("flex shrink-0 items-center gap-1", className), children: [_jsx(SimpleIconButton, { icon: _jsx(Monitor, { className: iconClassName, strokeWidth: 1 }), label: "Desktop", size: buttonSize, "data-testid": "desktop-viewport-button", selected: device === "desktop", onClick: () => setActiveSlotDevice("desktop") }), _jsx(SimpleIconButton, { icon: _jsx(Smartphone, { className: iconClassName, strokeWidth: 1 }), label: "Mobile", size: buttonSize, "data-testid": "mobile-viewport-button", selected: Boolean(device && device !== "desktop"), disabled: !firstMobileDeviceName, onClick: () => {
                    if (firstMobileDeviceName) {
                        setActiveSlotDevice(firstMobileDeviceName);
                    }
                } }), _jsx(SimpleIconButton, { icon: _jsx(Table, { className: iconClassName, strokeWidth: 1 }), label: "Form", size: buttonSize, "data-testid": "form-viewport-button", selected: !device, onClick: () => setActiveSlotDevice("") })] }));
}
//# sourceMappingURL=DeviceSwitchToolbar.js.map