import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Select } from "../../components/ui/select";
import { Input } from "../../components/ui/input";
import { SimpleIconButton } from "../ui/SimpleIconButton";
import { RotateDeviceIcon } from "../ui/Icons";
import { useDebouncedCallback } from "use-debounce";
import { cn } from "../../lib/utils";
import { Lock, LockOpen } from "lucide-react";
export function DeviceToolbar({ pageViewContext, configuration, }) {
    const debouncedSetDeviceWidth = useDebouncedCallback((width) => {
        pageViewContext.setDeviceWidth(width);
    }, 400);
    const debouncedSetDeviceHeight = useDebouncedCallback((height) => {
        pageViewContext.setDeviceHeight(height);
    }, 400);
    return (_jsxs("div", { className: "bg-neutral-grey-5 z-1000 flex w-full items-center justify-center gap-2 pt-2 pb-2 text-sm", children: [_jsx(Select, { className: "w-36", options: configuration.devices.map((x) => ({
                    label: x.name,
                    value: x.name,
                })), value: pageViewContext.device, onValueChange: (value) => pageViewContext.setDevice(value), placeholder: "Select device" }), _jsx(Input, { type: "number", max: 10000, className: "w-16 text-sm", value: pageViewContext.deviceWidth || "", onChange: (e) => debouncedSetDeviceWidth(Number(e.target.value) || undefined) }), "x", _jsx(Input, { type: "number", max: 10000, className: "w-16 text-sm", value: pageViewContext.deviceHeight || "", onChange: (e) => debouncedSetDeviceHeight(Number(e.target.value) || undefined) }), _jsx(SimpleIconButton, { icon: pageViewContext.lockHeight ? (_jsx(Lock, { className: "h-4 w-4", strokeWidth: 1 })) : (_jsx(LockOpen, { className: "h-4 w-4", strokeWidth: 1 })), className: "hover:bg-neutral-grey-15", selected: false, onClick: () => pageViewContext.setLockHeight(!pageViewContext.lockHeight), label: "Lock Height" }), _jsx(SimpleIconButton, { className: "hover:bg-neutral-grey-15", icon: _jsx(RotateDeviceIcon, { className: cn("h-4 w-4 transition-transform duration-300", pageViewContext.rotate ? "rotate-90" : "") }), selected: pageViewContext.rotate || false, onClick: () => pageViewContext.setRotate(!pageViewContext.rotate), label: pageViewContext.rotate ? "Switch to Portrait" : "Switch to Landscape" })] }));
}
//# sourceMappingURL=DeviceToolbar.js.map