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 { useIsDateInPast } from '../../../../lib/ui/use-is-date-in-past.js';
export function CodeDetails(props) {
    const { accessCode } = props;
    const { device } = useDevice({ device_id: accessCode.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, { accessCode: accessCode }), _jsx(DotDivider, {}), t.code, ": ", accessCode.code] }));
}
function Duration(props) {
    const { accessCode } = props;
    const hasStarted = useIsDateInPast('starts_at' in accessCode ? accessCode?.starts_at : null) ??
        false;
    if (accessCode.type === 'ongoing') {
        return (_jsxs("span", { children: [t.ends, ": ", t.never] }));
    }
    if (hasStarted) {
        return (_jsxs("span", { children: [t.ends, ": ", formatDate(accessCode.ends_at), ' '] }));
    }
    return (_jsxs("span", { children: [t.starts, ": ", formatDate(accessCode.starts_at)] }));
}
function formatDate(date) {
    return DateTime.fromISO(date).toLocaleString({
        month: 'long',
        day: 'numeric',
    });
}
const t = {
    code: 'Code',
    starts: 'Starts',
    ends: 'Ends',
    never: 'Never',
};
//# sourceMappingURL=CodeDetails.js.map