import*as UI from"../../ui/legacy/legacy.js";export class RadioSetting{setting;options;element;radioElements;ignoreChangeEvents;selectedIndex;constructor(e,t,s){this.setting=t,this.options=e,this.element=document.createElement("div"),UI.ARIAUtils.setDescription(this.element,s),UI.ARIAUtils.markAsRadioGroup(this.element),this.radioElements=[];for(const e of this.options){const i=UI.Fragment.Fragment.build`
  <label $="label" class="lighthouse-radio">
  <input $="input" type="radio" value=${e.value} name=${t.name}>
  <span $="span" class="lighthouse-radio-text">${e.label()}</span>
  </label>
  `;this.element.appendChild(i.element());const n=e.tooltip?.()||s;s&&(UI.Tooltip.Tooltip.install(i.$("input"),n),UI.Tooltip.Tooltip.install(i.$("span"),n));const a=i.$("input");a.addEventListener("change",this.valueChanged.bind(this)),this.radioElements.push(a)}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)}}