import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
import { DeviceInfo } from '../../../../lib/seam/components/DeviceDetails/DeviceInfo.js';
import { DeviceModel } from '../../../../lib/seam/components/DeviceDetails/DeviceModel.js';
import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
import { NoiseLevelStatus } from '../../../../lib/ui/device/NoiseLevelStatus.js';
import { OnlineStatus } from '../../../../lib/ui/device/OnlineStatus.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { NoiseSensorActivityList } from '../../../../lib/ui/noise-sensor/NoiseSensorActivityList.js';
import { NoiseThresholdsList } from '../../../../lib/ui/noise-sensor/NoiseThresholdsList.js';
import { TabSet } from '../../../../lib/ui/TabSet.js';
export function NoiseSensorDeviceDetails({ device, disableConnectedAccountInformation, disableResourceIds, onBack, className, }) {
    const [tab, setTab] = useState('details');
    return (_jsx("div", { className: classNames('seam-device-details', className), children: _jsxs("div", { className: 'seam-body seam-body-no-margin', children: [_jsxs("div", { className: 'seam-contained-summary', children: [_jsx(ContentHeader, { title: t.noiseSensor, onBack: onBack, className: 'seam-content-header-contained' }), _jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.noiseSensor }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsx(NoiseLevelStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }) }), _jsx(TabSet, { tabs: ['details', 'activity'], tabTitles: {
                                details: t.details,
                                activity: t.activity,
                            }, activeTab: tab, onTabChange: (tab) => {
                                setTab(tab);
                            } })] }), tab === 'details' && (_jsxs("div", { className: 'seam-padded-container', children: [_jsx(NoiseThresholdsList, { device: device }), _jsx(DeviceInfo, { device: device, disableConnectedAccountInformation: disableConnectedAccountInformation, disableResourceIds: disableResourceIds })] })), tab === 'activity' && _jsx(NoiseSensorActivityList, { device: device })] }) }));
}
const t = {
    noiseSensor: 'Noise Sensor',
    status: 'Status',
    noiseLevel: 'Noise level',
    details: 'Details',
    activity: 'Activity',
};
//# sourceMappingURL=NoiseSensorDeviceDetails.js.map