import*as UI from"../ui/ui.js";export class RadioSetting{constructor(e,t,i){this._setting=t,this._options=e,this.element=document.createElement("div"),UI.ARIAUtils.setDescription(this.element,i),UI.ARIAUtils.markAsRadioGroup(this.element),this._radioElements=[];for(const s of this._options){const e=UI.Fragment.Fragment.build`
  <label $="label" class="lighthouse-radio">
  <input $="input" type="radio" value=${s.value} name=${t.name}>
  <span $="span" class="lighthouse-radio-text">${s.label}</span>
  </label>
  `;this.element.appendChild(e.element()),i&&(UI.Tooltip.Tooltip.install(e.$("input"),i),UI.Tooltip.Tooltip.install(e.$("span"),i));const n=e.$("input");n.addEventListener("change",this._valueChanged.bind(this)),this._radioElements.push(n)}this._ignoreChangeEvents=!1,this._selectedIndex=-1,t.addChangeListener(this._settingChanged,this),this._settingChanged()}_updateUI(){this._ignoreChangeEvents=!0,this._radioElements[this._selectedIndex].checked=!0,this._ignoreChangeEvents=!1}_settingChanged(){const e=this._setting.get();this._selectedIndex=this._options.findIndex((t=>t.value===e)),this._updateUI()}_valueChanged(e){if(this._ignoreChangeEvents)return;const t=this._radioElements.find((e=>e.checked));t&&this._setting.set(t.value)}}