const { useEffect, useMemo, useRef } = React;
const { TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio } = window;
function PCCTweaks({ tweaks, setTweak, currentVitals }) {
useEffect(() => {
document.documentElement.setAttribute('data-theme', tweaks.theme === 'light' ? 'light' : 'dark');
}, [tweaks.theme]);
useEffect(() => {
document.body.setAttribute('data-density', tweaks.density);
}, [tweaks.density]);
useEffect(() => {
document.body.classList.toggle('no-ecg', !tweaks.ecgWave);
}, [tweaks.ecgWave]);
useEffect(() => {
window.PCC_SOUND.setEnabled(!!tweaks.soundEnabled);
}, [tweaks.soundEnabled]);
useEffect(() => {
window.PCC_SOUND.setVolume((tweaks.soundVolume ?? 25) / 100);
}, [tweaks.soundVolume]);
useEffect(() => {
if (!currentVitals) {
window.PCC_SOUND.setVitals({ hr: 0, spo2: 0, critical: false });
return;
}
const hr = +currentVitals.hr || 0;
const spo2 = +currentVitals.spo2 || 0;
const bpSys = currentVitals.bp ? +currentVitals.bp.split('/')[0] : null;
const temp = +currentVitals.temp || 0;
const critical = (hr && (hr < 50 || hr > 130)) || (spo2 && spo2 < 90) || (bpSys && bpSys < 90) || (temp && temp >= 39);
window.PCC_SOUND.setVitals({ hr, spo2, critical });
}, [currentVitals]);
useEffect(() => {
window.PCC_SOUND.setLubDub(!!tweaks.lubDub);
}, [tweaks.lubDub]);
useEffect(() => {
document.body.classList.toggle('glass', !!tweaks.glassPanels);
if (window.PFC_BG) window.PFC_BG.setGlass(!!tweaks.glassPanels);
}, [tweaks.glassPanels]);
useEffect(() => {
const a = (tweaks.glassOpacity ?? 62) / 100;
document.body.style.setProperty('--glass-alpha', String(a));
}, [tweaks.glassOpacity]);
return (
<TweaksPanel title="TWEAKS · PFC">
<TweakSection label="Display" />
<TweakRadio
label="Theme"
value={tweaks.theme}
options={['dark', 'light']}
onChange={v => setTweak('theme', v)}
/>
<TweakRadio
label="Density"
value={tweaks.density}
options={['compact', 'regular', 'comfy']}
onChange={v => setTweak('density', v)}
/>
<TweakToggle
label="ECG waveform"
value={tweaks.ecgWave}
onChange={v => setTweak('ecgWave', v)}
/>
<TweakToggle
label="Heart pulse"
value={tweaks.pulseHeart}
onChange={v => setTweak('pulseHeart', v)}
/>
<TweakSection label="Audio · Telemetry" />
<TweakToggle
label="Sound"
value={tweaks.soundEnabled}
onChange={v => setTweak('soundEnabled', v)}
/>
<TweakToggle
label="Lub-Dub (S₁ · S₂)"
value={tweaks.lubDub}
onChange={v => setTweak('lubDub', v)}
/>
<TweakSlider
label="Volume"
value={tweaks.soundVolume}
min={0} max={100} step={5}
unit="%"
onChange={v => setTweak('soundVolume', v)}
/>
<TweakSection label="Background · WebGL" />
<TweakToggle
label="Glass panels"
value={tweaks.glassPanels}
onChange={v => setTweak('glassPanels', v)}
/>
<TweakSlider
label="Glass opacity"
value={tweaks.glassOpacity ?? 62}
min={30} max={95} step={1}
unit="%"
onChange={v => setTweak('glassOpacity', v)}
/>
<TweakToggle
label="Tint to patient condition"
value={tweaks.bgCondition !== false}
onChange={v => setTweak('bgCondition', v)}
/>
<TweakSection label="Content" />
<TweakToggle
label="Show training notes"
value={tweaks.showStudentNotes}
onChange={v => setTweak('showStudentNotes', v)}
/>
</TweaksPanel>
);
}
window.PCCTweaks = PCCTweaks;