import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
import { BeeIcon } from '../../../../lib/icons/Bee.js';
import { ChevronWideIcon } from '../../../../lib/icons/ChevronWide.js';
import { NestedClimateSettingScheduleTable } from '../../../../lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js';
import { useConnectedAccount } from '../../../../lib/seam/connected-accounts/use-connected-account.js';
import { useClimateSettingSchedules } from '../../../../lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { DetailRow } from '../../../../lib/ui/layout/DetailRow.js';
import { DetailSection } from '../../../../lib/ui/layout/DetailSection.js';
import { DetailSectionGroup } from '../../../../lib/ui/layout/DetailSectionGroup.js';
import { ClimateSettingStatus } from '../../../../lib/ui/thermostat/ClimateSettingStatus.js';
import { ThermostatCard } from '../../../../lib/ui/thermostat/ThermostatCard.js';
export function ThermostatDeviceDetails(props) {
    const { device, onBack, className, disableCreateAccessCode, disableEditAccessCode, } = props;
    const [climateSettingsOpen, setClimateSettingsOpen] = useState(false);
    const { connectedAccount } = useConnectedAccount(device.connected_account_id);
    const { climateSettingSchedules } = useClimateSettingSchedules({
        device_id: device.device_id,
    });
    if (climateSettingsOpen) {
        return (_jsx(NestedClimateSettingScheduleTable, { deviceId: device.device_id, disableLockUnlock: props.disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: props.disableDeleteAccessCode, onBack: () => {
                setClimateSettingsOpen(false);
            }, className: className }));
    }
    if (device == null) {
        return null;
    }
    const climateSettingSchedulesLabel = climateSettingSchedules?.length !== 1
        ? t.climateSchedules
        : t.climateSchedule;
    return (_jsxs("div", { className: classNames('seam-device-details', className), children: [_jsx(ContentHeader, { title: t.thermostat, onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [_jsx(ThermostatCard, { device: device }), _jsx("div", { className: 'seam-thermostat-device-details', children: _jsxs(DetailSectionGroup, { children: [_jsx(DetailSection, { label: t.scheduledClimates, tooltipContent: t.scheduledClimatesTooltip, children: _jsx(DetailRow, { label: climateSettingSchedules == null
                                            ? t.viewingClimateSchedules
                                            : `${climateSettingSchedules.length} ${climateSettingSchedulesLabel}`, onClick: () => {
                                            setClimateSettingsOpen(true);
                                        }, children: _jsx("div", { className: 'seam-detail-row-rotated-icon', children: _jsx(ChevronWideIcon, {}) }) }) }), _jsx(DetailSection, { label: t.currentSettings, tooltipContent: t.currentSettingsTooltip, children: _jsx(DetailRow, { label: t.climate, children: _jsx(ClimateSettingStatus, { climateSetting: device.properties.current_climate_setting, temperatureUnit: 'fahrenheit' }) }) }), _jsxs(DetailSection, { label: t.defaultSettings, tooltipContent: t.defaultSettingsTooltip, children: [_jsx(DetailRow, { label: t.defaultClimate, children: device.properties.default_climate_setting != null ? (_jsx(ClimateSettingStatus, { climateSetting: device.properties.default_climate_setting, temperatureUnit: 'fahrenheit' })) : (_jsx("p", { children: t.none })) }), _jsx(DetailRow, { label: t.allowManualOverride, children: _jsx("p", { children: device.properties.current_climate_setting
                                                    .manual_override_allowed
                                                    ? t.yes
                                                    : t.no }) })] }), _jsxs(DetailSection, { label: t.deviceDetails, tooltipContent: t.deviceDetailsTooltip, children: [_jsx(DetailRow, { label: t.brand, children: _jsxs("div", { className: 'seam-detail-row-hstack', children: [device.properties.model.manufacturer_display_name, device.properties.manufacturer === 'ecobee' && _jsx(BeeIcon, {})] }) }), _jsx(DetailRow, { label: t.linkedAccount, sublabel: connectedAccount?.user_identifier?.email ??
                                                device.connected_account_id }), _jsx(DetailRow, { label: t.deviceId, sublabel: device.device_id })] })] }) })] })] }));
}
const t = {
    thermostat: 'Thermostat',
    climateSchedule: 'scheduled climate',
    climateSchedules: 'scheduled climates',
    viewingClimateSchedules: 'View scheduled climates',
    scheduledClimates: 'Scheduled climates',
    scheduledClimatesTooltip: "Scheduled climates let you automatically change the thermostat's climate at a set time.",
    currentSettings: 'Current settings',
    currentSettingsTooltip: 'These are the settings currently on the device. If you change them here, they change on the device.',
    climate: 'Climate',
    defaultSettings: 'Default settings',
    defaultSettingsTooltip: 'When a scheduled climate reaches its end time, the default settings will kick in.',
    defaultClimate: 'Default climate',
    allowManualOverride: 'Allow manual override',
    deviceDetails: 'Device details',
    deviceDetailsTooltip: 'When a scheduled climate reaches its end time, the default settings will kick in.',
    brand: 'Brand',
    linkedAccount: 'Linked account',
    deviceId: 'Device ID',
    none: 'None',
    yes: 'Yes',
    no: 'No',
};
//# sourceMappingURL=ThermostatDeviceDetails.js.map