import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isLockDevice } from 'seamapi';
import { useDevice } from '../../../../lib/seam/devices/use-device.js';
import { useToggleLock } from '../../../../lib/seam/devices/use-toggle-lock.js';
import { Button } from '../../../../lib/ui/Button.js';
import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
import { TextButton } from '../../../../lib/ui/TextButton.js';
export function AccessCodeDevice({ deviceId, disableLockUnlock, onSelectDevice, }) {
    const { isLoading, device } = useDevice({
        device_id: deviceId,
    });
    if (isLoading) {
        return null;
    }
    if (device == null) {
        return null;
    }
    if (!isLockDevice(device)) {
        return null;
    }
    return (_jsx(Content, { device: device, disableLockUnlock: disableLockUnlock, onSelectDevice: onSelectDevice }));
}
function Content(props) {
    const { device, disableLockUnlock, onSelectDevice } = props;
    const toggleLock = useToggleLock(device);
    const toggleLockLabel = device.properties.locked ? t.unlock : t.lock;
    return (_jsxs("div", { className: 'seam-access-code-device', children: [_jsx("div", { className: 'seam-device-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { children: device.properties.name }), _jsx(TextButton, { onClick: () => {
                            onSelectDevice(device.device_id);
                        }, children: t.deviceDetails })] }), !disableLockUnlock && (_jsx(Button, { onClick: () => {
                    toggleLock.mutate();
                }, children: toggleLockLabel }))] }));
}
const t = {
    deviceDetails: 'Device details',
    unlock: 'Unlock',
    lock: 'Lock',
};
//# sourceMappingURL=AccessCodeDevice.js.map