import{html as t}from"../../../lit/index.js";import"./web-container-doc-player.js";import{DDD as e}from"../../d-d-d/d-d-d.js";export class WebContainerWCRegistryDocs extends e{static get tag(){return"web-container-wc-registry-docs"}constructor(){super(),this.text="Select the project to produce a demo for. This will make a best attempt",this.file="https://cdn.hax.cloud/cdn/wc-registry.json",this.options={"":""}}static get properties(){return{file:{type:String},text:{type:String},options:{type:Object}}}render(){return t`
    <select @change="${this.selectChange}">
      <option></option>
      ${Object.keys(this.options).map((e=>t`<option value="${e}">${e}</option>`))}
    </select>
    <p>${this.text}</p>
    <div id="container"></div>
    `}updated(t){super.updated&&super.updated(t),t.has("file")&&this.file&&fetch(this.file).then((t=>t.json())).then((t=>{this.options=Object.fromEntries(Object.entries(t).filter((([t,e])=>e.includes("@haxtheweb/")&&!t.startsWith("hax"))))}))}async selectChange(t){const e=this.shadowRoot.querySelector("select");if(e.value){await globalThis.WebContainerManager.requestAvailability();let t=globalThis.document.createElement("web-container-doc-player"),i=this.options[e.value].split("/");t.project=`${i.shift()}/${i.shift()}`,t.element=e.value,t.importpath=this.options[e.value];let s=this.shadowRoot.querySelector("#container");s.innerHTML="",s.appendChild(t)}}}globalThis.customElements.define(WebContainerWCRegistryDocs.tag,WebContainerWCRegistryDocs);