import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { BatteryStatus } from '../../../../lib/ui/device/BatteryStatus.js';
import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
import { LockStatus } from '../../../../lib/ui/device/LockStatus.js';
import { isDeviceAccountOffline, OnlineStatus, } from '../../../../lib/ui/device/OnlineStatus.js';
import { TableCell } from '../../../../lib/ui/Table/TableCell.js';
import { TableRow } from '../../../../lib/ui/Table/TableRow.js';
import { Title } from '../../../../lib/ui/typography/Title.js';
export function DeviceRow({ device, onClick, }) {
    const isDeviceOffline = !device.properties.online;
    const isDisconnected = isDeviceAccountOffline(device) || isDeviceOffline;
    const isConnected = !isDisconnected;
    return (_jsxs(TableRow, { onClick: onClick, children: [_jsx(TableCell, { className: classNames('seam-image-cell', {
                    'seam-offline-fade': isDisconnected,
                }), children: _jsx(DeviceImage, { device: device }) }), _jsxs(TableCell, { className: 'seam-body-cell', children: [_jsx(Title, { className: classNames('seam-truncated-text', {
                            'seam-offline-fade': isDisconnected,
                        }), children: device.properties.name }), _jsxs("div", { className: 'seam-bottom', children: [_jsxs("span", { className: classNames('seam-device-model', {
                                    'seam-offline-fade': isDisconnected,
                                }), children: [device.properties.model.manufacturer_display_name, ' ', device.properties.model.display_name] }), _jsxs("div", { className: 'seam-device-statuses', children: [_jsx(OnlineStatus, { device: device }), isConnected && _jsx(BatteryStatus, { device: device }), isConnected && _jsx(LockStatus, { device: device })] })] })] })] }));
}
//# sourceMappingURL=DeviceRow.js.map