import{store as e}from"../../haxcms-elements/lib/core/haxcms-site-store.js";import{FlattenedNodesObserver as t}from"../../../@polymer/polymer/lib/utils/flattened-nodes-observer.js";import{css as i,html as r,LitElement as s}from"../../../lit/index.js";import{autorun as o,toJS as d}from"../../../mobx/dist/mobx.esm.js";import"../../iframe-loader/iframe-loader.js";class H5pWrappedElement extends s{static get properties(){return{__editLink:{type:String,attribute:!1},__editMode:{type:Boolean,attribute:!1}}}static get styles(){return i`
      :host {
        display: block;
      }
      :host [part="container"] {
        display: block;
        position: relative;
      }
      .editing[part="container"] {
        min-height: 100px;
      }
      :host [part="edit-screen"] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
      }
      :host [part="source-link"] a {
        background: black;
        color: white;
        padding: 1em;
      }
      :host [part="anchor"] {
        display: block;
      }
    `}constructor(){super(),this.src="",this.__disposer=o((()=>{this.__editMode=d(e.editMode)}))}disconnectedCallback(){super.disconnectedCallback(),this.__disposer()}firstUpdated(){this._observer=new t(this,(e=>{e.addedNodes.forEach((e=>{const t="IFRAME"===e.nodeName?e:this.querySelector("iframe");t&&void 0!==t.src&&(this.__editLink=t.src.replace("entity_iframe/","")+"/edit")}))}))}render(){return r`
      <div part="container" class="${this.__editMode,"editing"}">
        ${this.__editMode?r`
              <slot></slot>
              <div part="edit-screen">
                <div part="source-link">
                  <a part="anchor" href="${this.__editLink}" target="_blank"
                    >Edit H5P Source</a
                  >
                </div>
              </div>
            `:r`
              <iframe-loader><slot></slot></iframe-loader>
            `}
      </div>
    `}}customElements.define("h5p-wrapped-element",H5pWrappedElement);export{H5pWrappedElement};