import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
import { useComponentTelemetry } from '../../../../lib/telemetry/index.js';
import { formatDateAndTime } from '../../../../lib/dates.js';
import { ArrowRightIcon } from '../../../../lib/icons/ArrowRight.js';
import { ClimateSettingScheduleCard } from '../../../../lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleCard.js';
import { withRequiredCommonProps, } from '../../../../lib/seam/components/common-props.js';
import { NestedDeviceDetails } from '../../../../lib/seam/components/DeviceDetails/DeviceDetails.js';
import { useClimateSettingSchedule } from '../../../../lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedule.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';
export const NestedClimateSettingScheduleDetails = withRequiredCommonProps(ClimateSettingScheduleDetails);
export function ClimateSettingScheduleDetails({ climateSettingScheduleId, disableLockUnlock = false, disableDeleteAccessCode = false, onBack, className, disableCreateAccessCode, disableEditAccessCode, }) {
    useComponentTelemetry('ClimateSettingScheduleDetails');
    const { climateSettingSchedule } = useClimateSettingSchedule(climateSettingScheduleId);
    const [selectedDeviceId, selectDevice] = useState(null);
    if (climateSettingSchedule == null) {
        return null;
    }
    const isManualOverrideAllowed = climateSettingSchedule.manual_override_allowed ?? false;
    if (selectedDeviceId != null) {
        return (_jsx(NestedDeviceDetails, { deviceId: selectedDeviceId, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: () => {
                selectDevice(null);
            }, className: className }));
    }
    return (_jsxs("div", { className: classNames('seam-climate-setting-schedule-details', className), children: [_jsx(ContentHeader, { title: t.climateSettingSchedule, onBack: onBack }), _jsxs("div", { className: 'seam-climate-setting-schedule-details-content', children: [_jsx(ClimateSettingScheduleCard, { climateSettingScheduleId: climateSettingScheduleId, onSelectDevice: selectDevice }), _jsx("div", { className: 'seam-default-setting-message-container', children: _jsxs("span", { className: 'seam-default-setting-message', children: [t.defaultSettingMessagePart1, ' ', _jsx("span", { className: 'seam-default-setting-text', children: t.defaultSetting }), ' ', t.defaultSettingMessagePart2] }) }), _jsxs(DetailSectionGroup, { children: [_jsxs(DetailSection, { children: [_jsx(DetailRow, { label: t.startEndTime, children: _jsxs("span", { className: 'seam-climate-setting-details-value seam-climate-setting-details-schedule-range', children: [`${formatDateAndTime(climateSettingSchedule.schedule_starts_at)}`, _jsx(ArrowRightIcon, {}), `${formatDateAndTime(climateSettingSchedule.schedule_ends_at)}`] }) }), _jsx(DetailRow, { label: t.climateSetting, children: _jsx(ClimateSettingStatus, { climateSetting: climateSettingSchedule, iconPlacement: 'right' }) }), _jsx(DetailRow, { label: t.allowManualOverride, children: _jsx("span", { className: 'seam-climate-setting-details-value', children: isManualOverrideAllowed ? t.on : t.off }) })] }), _jsx(DetailSection, { children: _jsx(DetailRow, { label: t.creationDate, children: _jsx("div", { className: 'seam-creation-date', children: formatDateAndTime(climateSettingSchedule.created_at) }) }) })] })] })] }));
}
const t = {
    climateSettingSchedule: 'Climate setting schedule',
    startEndTime: 'Start/End Time',
    climateSetting: 'Climate setting',
    allowManualOverride: 'Allow manual override',
    creationDate: 'Creation date',
    defaultSettingMessagePart1: 'Thermostat will return to its',
    defaultSetting: 'default setting',
    defaultSettingMessagePart2: 'at end time.',
    on: 'On',
    off: 'Off',
};
//# sourceMappingURL=ClimateSettingScheduleDetails.js.map