// mv_theme.js
// Apply consistent colors for manifest viewing.
//
// Usage:
//   <model-viewer class="mv" data-theme="primary" ...></model-viewer>
//   <model-viewer class="mv" data-theme="accent"  ...></model-viewer>

const THEMES = {
  primary: { rgba: [0.10, 0.45, 1.00, 1.0] },   // diagnostic blue
  accent:  { rgba: [0.78, 0.33, 0.10, 1.0] },   // burnt orange-ish
};

function applyTheme(mv) {
  const key = (mv.dataset.theme || "primary").toLowerCase();
  const theme = THEMES[key] || THEMES.primary;

  // Lighting-related material choices that improve face contrast
  const metallic = 0.0;
  const roughness = 0.35;

  for (const mat of mv.model.materials) {
    mat.pbrMetallicRoughness.setBaseColorFactor(theme.rgba);
    mat.pbrMetallicRoughness.setMetallicFactor(metallic);
    mat.pbrMetallicRoughness.setRoughnessFactor(roughness);
  }
}

function hook(mv) {
  if (mv.model) {
    applyTheme(mv);
  } else {
    mv.addEventListener("load", () => applyTheme(mv), { once: true });
  }
}

for (const mv of document.querySelectorAll("model-viewer.mv")) {
  hook(mv);
}