import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DateTime } from 'luxon';
import { useDevice } from '../../../../lib/seam/devices/use-device.js';
import { DotDivider } from '../../../../lib/ui/layout/DotDivider.js';
import { ClimateSettingStatus } from '../../../../lib/ui/thermostat/ClimateSettingStatus.js';
import { useIsDateInPast } from '../../../../lib/ui/use-is-date-in-past.js';
export function ClimateSettingScheduleRowDetails(props) {
    const { climateSettingSchedule } = props;
    const { device } = useDevice({ device_id: climateSettingSchedule.device_id });
    return (_jsxs("div", { className: 'seam-details', children: [_jsx("span", { className: 'seam-device-name seam-truncated-text', children: device?.properties.name }), _jsx(DotDivider, {}), _jsx(Duration, { climateSettingSchedule: climateSettingSchedule }), _jsx(DotDivider, {}), _jsx(ClimateSettingStatus, { climateSetting: climateSettingSchedule })] }));
}
function Duration(props) {
    const { climateSettingSchedule } = props;
    const hasStarted = useIsDateInPast(climateSettingSchedule.schedule_starts_at) ?? false;
    if (hasStarted) {
        return (_jsxs("span", { children: [t.ends, " ", formatDate(climateSettingSchedule.schedule_ends_at), ' '] }));
    }
    return (_jsxs("span", { children: [t.starts, " ", formatDate(climateSettingSchedule.schedule_starts_at)] }));
}
function formatDate(date) {
    return DateTime.fromISO(date).toLocaleString({
        month: 'long',
        day: 'numeric',
    });
}
const t = {
    starts: 'Starts',
    ends: 'Ends',
};
//# sourceMappingURL=ClimateSettingScheduleRowDetails.js.map