import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isThermostatDevice } from 'seamapi';
import { ChevronWideIcon } from '../../../../lib/icons/ChevronWide.js';
import { useDevice } from '../../../../lib/seam/devices/use-device.js';
import { DeviceImage } from '../../../../lib/ui/device/DeviceImage.js';
import { ClimateSettingStatus } from '../../../../lib/ui/thermostat/ClimateSettingStatus.js';
export function ClimateSettingScheduleDeviceBar({ deviceId, onSelectDevice, }) {
    const { isLoading, device } = useDevice({
        device_id: deviceId,
    });
    if (isLoading) {
        return null;
    }
    if (device == null) {
        return null;
    }
    if (!isThermostatDevice(device)) {
        return null;
    }
    return _jsx(Content, { device: device, onSelectDevice: onSelectDevice });
}
function Content(props) {
    const { device, onSelectDevice } = props;
    return (_jsxs("div", { className: 'seam-climate-setting-schedule-device-bar', onClick: () => {
            onSelectDevice(device.device_id);
        }, children: [_jsxs("div", { className: 'seam-climate-setting-schedule-device-content', children: [_jsx("div", { className: 'seam-device-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-climate-setting-schedule-device-details', children: [_jsx("div", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-device-current-climate-setting', children: [t.currentClimate, ":", _jsx(ClimateSettingStatus, { climateSetting: device.properties.current_climate_setting })] })] })] }), _jsx("div", { className: 'seam-climate-setting-schedule-device-chevron', children: _jsx(ChevronWideIcon, {}) })] }));
}
const t = {
    currentClimate: 'Current climate',
};
//# sourceMappingURL=ClimateSettingScheduleDeviceBar.js.map