import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ZonedTime } from 'zoned-time';
import { formatTime, formatTimeZone } from '../../../lib/dates.js';
import { ArrowRightIcon } from '../../../lib/icons/ArrowRight.js';
import { useNoiseThresholds } from '../../../lib/seam/noise-sensors/use-noise-thresholds.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 { LoadingToast } from '../../../lib/ui/LoadingToast/LoadingToast.js';
export function NoiseThresholdsList({ device, }) {
    const { noiseThresholds, isInitialLoading } = useNoiseThresholds({
        device_id: device.device_id,
    });
    return (_jsxs(DetailSectionGroup, { children: [_jsx("div", { className: 'seam-loading-toast-centered-wrap', children: _jsx(LoadingToast, { isLoading: isInitialLoading, label: t.loading, top: '56px' }) }), _jsxs("div", { className: 'seam-detail-section-wrap', children: [_jsx(DetailSection, { label: t.noiseThresholds, tooltipContent: device.device_type === 'minut_sensor' ? (_jsxs("div", { className: 'seam-detail-section-tooltip-inner-content', children: [_jsx("span", { className: 'seam-tooltip-content', children: t.minutTooltipFirst }), _jsx("span", { className: 'seam-tooltip-content', children: t.minutTooltipSecond })] })) : (t.tooltip), children: _jsx(Content, { noiseThresholds: noiseThresholds }) }), _jsxs("div", { className: 'seam-detail-section-footer', children: [_jsx("div", { className: 'seam-empty-div' }), _jsx("div", { className: 'seam-detail-section-footer-content', children: _jsx("div", { className: 'seam-detail-section-footer-content-text', children: _jsx("p", { children: getTimeZoneCaption(device, noiseThresholds) }) }) })] })] })] }));
}
function Content({ noiseThresholds, }) {
    if (noiseThresholds == null || noiseThresholds.length === 0) {
        return (_jsx(DetailRow, { label: _jsx("span", { className: 'seam-detail-row-empty-label', children: t.none }) }));
    }
    return noiseThresholds?.map((noiseThreshold) => (_jsx(DetailRow, { label: _jsxs("div", { className: 'seam-detail-row-label-column', children: [noiseThreshold.name !== '' && (_jsx("span", { className: 'seam-detail-row-label', children: noiseThreshold.name })), _jsxs("div", { className: 'seam-detail-row-label-block', children: [_jsx("span", { className: 'seam-row-sublabel seam-row-sublabel-text-default', children: formatTime(noiseThreshold.starts_daily_at) }), _jsx(ArrowRightIcon, {}), _jsx("span", { className: 'seam-row-sublabel seam-row-sublabel-text-default', children: formatTime(noiseThreshold.ends_daily_at) })] })] }), children: _jsxs("p", { children: [noiseThreshold.noise_threshold_decibels, " ", t.decibel] }) }, noiseThreshold.noise_threshold_id)));
}
const getTimeZoneCaption = (device, thresholds) => {
    if (device.location?.timezone != null) {
        return `${t.allTimesIn} ${formatTimeZone(device.location.timezone)}`;
    }
    const firstThreshold = thresholds?.[0];
    if (firstThreshold != null) {
        const zonedTime = ZonedTime.from(firstThreshold.starts_daily_at);
        return `${t.allTimesIn} ${formatTimeZone(zonedTime.timeZone)}`;
    }
    return null;
};
const t = {
    noiseThresholds: 'Noise thresholds',
    tooltip: 'A noise threshold is the highest noise level (in dB) you want to allow for a given time range in the day.',
    minutTooltipFirst: 'A noise threshold is the highest noise level (in dB) you want to allow.',
    minutTooltipSecond: 'Quiet hours is a separate threshold that takes effect only for a specified time range.',
    none: 'None',
    loading: 'Loading...',
    decibel: 'dB',
    allTimesIn: 'All times in',
};
//# sourceMappingURL=NoiseThresholdsList.js.map