import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DateTime } from 'luxon';
import { formatDateAndTime } from '../../../../lib/dates.js';
import { ClimateSettingScheduleIcon } from '../../../../lib/icons/ClimateSettingSchedule.js';
import { ClimateSettingScheduleDeviceBar } from '../../../../lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.js';
import { useClimateSettingSchedule } from '../../../../lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedule.js';
import { DotDivider } from '../../../../lib/ui/layout/DotDivider.js';
import { ClimateSettingStatus } from '../../../../lib/ui/thermostat/ClimateSettingStatus.js';
import { useCurrentTime } from '../../../../lib/ui/use-current-time.js';
export function ClimateSettingScheduleCard({ climateSettingScheduleId, onSelectDevice, }) {
    return (_jsx("div", { className: 'seam-climate-setting-schedule-card', children: _jsx(Content, { climateSettingScheduleId: climateSettingScheduleId, onSelectDevice: onSelectDevice }) }));
}
function Content(props) {
    const { climateSettingScheduleId, onSelectDevice } = props;
    const { climateSettingSchedule } = useClimateSettingSchedule(climateSettingScheduleId);
    if (climateSettingSchedule == null) {
        return null;
    }
    const name = climateSettingSchedule.name ?? t.fallbackName;
    return (_jsxs("div", { className: 'seam-climate-setting-schedule-content', children: [_jsxs("div", { className: 'seam-climate-setting-schedule-summary-container', children: [_jsx("div", { className: 'seam-climate-setting-schedule-icon-block', children: _jsx(ClimateSettingScheduleIcon, {}) }), _jsxs("div", { className: 'seam-climate-setting-schedule-summary', children: [_jsx("h5", { className: 'seam-climate-setting-schedule-heading', children: name }), _jsxs("div", { className: 'seam-climate-setting-schedule-subheading', children: [_jsx(ClimateSettingStatus, { climateSetting: climateSettingSchedule }), _jsx(DotDivider, {}), _jsx(ClimateSettingScheduleTiming, { climateSettingSchedule: climateSettingSchedule })] })] })] }), _jsx(ClimateSettingScheduleDeviceBar, { onSelectDevice: onSelectDevice, deviceId: climateSettingSchedule.device_id })] }));
}
function ClimateSettingScheduleTiming(props) {
    const { climateSettingSchedule } = props;
    const currentTime = useCurrentTime();
    if (currentTime === null)
        return null;
    const startTime = DateTime.fromISO(climateSettingSchedule.schedule_starts_at);
    const endTime = DateTime.fromISO(climateSettingSchedule.schedule_ends_at);
    if (currentTime < startTime)
        return (_jsxs("span", { children: [t.starts, ' ', formatDateAndTime(climateSettingSchedule.schedule_starts_at)] }));
    if (startTime <= currentTime && currentTime <= endTime)
        return (_jsxs("span", { children: [t.ends, " ", formatDateAndTime(climateSettingSchedule.schedule_starts_at)] }));
    return _jsx("span", { children: t.expired });
}
const t = {
    starts: 'Starts',
    ends: 'Ends',
    expired: 'Expired',
    fallbackName: 'Climate Setting Schedule',
};
//# sourceMappingURL=ClimateSettingScheduleCard.js.map