import{autorun as e,toJS as t}from"../../../../mobx/dist/mobx.esm.js";import{html as r}from"../../../../lit/index.js";import{store as o}from"./AppHaxStore.js";import{WiredDarkmodeToggle as d}from"../wired-darkmode-toggle/wired-darkmode-toggle.js";import{SimpleTourFinder as a}from"../../../simple-popover/lib/SimpleTourFinder.js";export class AppHAXWiredToggle extends(a(d)){constructor(){super(),this.tourName="hax",e((()=>{this.checked=t(o.darkMode)}))}static get tag(){return"app-hax-wired-toggle"}updated(e){super.updated&&super.updated(e),e.forEach(((e,t)=>{"checked"===t&&void 0!==e&&(o.darkMode=this[t],o.appEl.playSound("click"))}))}render(){return r`
      <div
        data-simple-tour-stop
        data-stop-title="data-label"
        data-label="${this.label}"
      >
        ${super.render()}
        <div data-stop-content style="display:none;">
          You can toggle your user interface between "light" and "dark" for you
          viewing enjoyment.
        </div>
      </div>
    `}}customElements.define(AppHAXWiredToggle.tag,AppHAXWiredToggle);