/* widget: Dobbelstenen */
/* =========================================================
   Dice widget
==========================================================*/
function mountDice(root, initState){
  let count = (initState && initState.count) || 2, rolling = false, history=Array.isArray(initState?.history)?initState.history.slice(-5):[];
  const PIPS = {1:[4],2:[0,8],3:[0,4,8],4:[0,2,6,8],5:[0,2,4,6,8],6:[0,2,3,5,6,8]};
  root.innerHTML = `
    <div class="dc">
      <div class="mt-top" style="width:100%;">
        <div class="tseg dc-seg">
          <button data-n="1">1</button><button data-n="2">2</button><button data-n="3">3</button>
        </div>
        <div class="mt-score dc-sumlbl"></div>
      </div>
      <p class="play-mission dc-mission"></p>
      <div class="dc-row"></div>
      <div class="dc-sum" aria-live="polite"></div>
      <div class="dc-history"></div>
      <button class="tbtn dc-roll"></button>
    </div>`;
  const row = root.querySelector(".dc-row"),
        sumEl = root.querySelector(".dc-sum"),
        rollBtn = root.querySelector(".dc-roll");
  function face(die, v){
    die.querySelectorAll("i").forEach((p,i)=>p.classList.toggle("on", PIPS[v].includes(i)));
    die.dataset.v = v;
  }
  function build(){
    row.innerHTML = "";
    for(let i=0;i<count;i++){
      const d = document.createElement("div");
      d.className = "die";
      for(let j=0;j<9;j++) d.appendChild(document.createElement("i"));
      face(d, 1+Math.floor(Math.random()*6));
      row.appendChild(d);
    }
    sumEl.textContent = "";
  }
  function roll(){
    if(rolling) return;
    rolling = true;
    sumEl.textContent = "";
    const dice = [...row.querySelectorAll(".die")];
    dice.forEach(d=>d.classList.add("rolling"));
    let n = 0;
    const iv = setInterval(()=>{
      dice.forEach(d=>face(d, 1+Math.floor(Math.random()*6)));
      tone(300+Math.random()*250, 0.04, 0, "square", 0.05);
      if(++n >= 9){
        clearInterval(iv);
        dice.forEach(d=>d.classList.remove("rolling"));
        const total = dice.reduce((s,d)=>s + +d.dataset.v, 0);
        if(count>1) sumEl.textContent = `${T("diceSum")}: ${total}`;
        history.push(total);history=history.slice(-5);renderHistory();
        rolling = false;
      }
    }, 90);
  }
  function renderHistory(){const box=root.querySelector('.dc-history');box.innerHTML='';if(!history.length)return;const label=document.createElement('span');label.textContent=T('diceHistory');box.append(label,...history.map(value=>{const chip=document.createElement('b');chip.textContent=value;return chip}))}
  row.addEventListener("click", roll);
  rollBtn.addEventListener("click", roll);
  root.querySelectorAll(".dc-seg button").forEach(b=>{
    b.addEventListener("click", ()=>{
      count = +b.dataset.n;
      root.querySelectorAll(".dc-seg button").forEach(x=>x.classList.toggle("on", x===b));
      build();
    });
  });
  function labels(){
    rollBtn.textContent = T("diceRoll");
    root.querySelector('.dc-mission').textContent=T('diceMission');
    root.querySelectorAll(".dc-seg button").forEach(x=>x.classList.toggle("on", +x.dataset.n===count));
    renderHistory();
  }
  document.addEventListener("langchange", labels);
  labels(); build();
  return { getState: ()=>({count,history:[...history]}) };
}