/**
 * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */if(!Joomla)throw new Error("Joomla API is not properly initiated");Joomla.selectedMediaFile={};const supportedExtensions=Joomla.getOptions("media-picker",{});if(!Object.keys(supportedExtensions).length)throw new Error("No supported extensions provided");document.addEventListener("onMediaFileSelected",async i=>{Joomla.selectedMediaFile=i.detail;const t=Joomla.Modal.getCurrent(),l=t.querySelector(".joomla-dialog-body");if(!l||l.closest(".joomla-dialog-media-field"))return;const e=l.querySelector("joomla-field-mediamore");e&&e.parentNode.removeChild(e);const{images:a,audios:o,videos:s,documents:c}=supportedExtensions;if(Joomla.selectedMediaFile.path&&Joomla.selectedMediaFile.type==="file"){let d;a.includes(Joomla.selectedMediaFile.extension.toLowerCase())?d="images":o.includes(Joomla.selectedMediaFile.extension.toLowerCase())?d="audios":s.includes(Joomla.selectedMediaFile.extension.toLowerCase())?d="videos":c.includes(Joomla.selectedMediaFile.extension.toLowerCase())&&(d="documents"),d&&l.insertAdjacentHTML("afterbegin",`<joomla-field-mediamore
  parent-id="${t.id}"
  type="${d}"
  summary-label="${Joomla.Text._("JFIELD_MEDIA_SUMMARY_LABEL")}"
  lazy-label="${Joomla.Text._("JFIELD_MEDIA_LAZY_LABEL")}"
  alt-label="${Joomla.Text._("JFIELD_MEDIA_ALT_LABEL")}"
  alt-check-label="${Joomla.Text._("JFIELD_MEDIA_ALT_CHECK_LABEL")}"
  alt-check-desc-label="${Joomla.Text._("JFIELD_MEDIA_ALT_CHECK_DESC_LABEL")}"
  classes-label="${Joomla.Text._("JFIELD_MEDIA_CLASS_LABEL")}"
  figure-classes-label="${Joomla.Text._("JFIELD_MEDIA_FIGURE_CLASS_LABEL")}"
  figure-caption-label="${Joomla.Text._("JFIELD_MEDIA_FIGURE_CAPTION_LABEL")}"
  embed-check-label="${Joomla.Text._("JFIELD_MEDIA_EMBED_CHECK_LABEL")}"
  embed-check-desc-label="${Joomla.Text._("JFIELD_MEDIA_EMBED_CHECK_DESC_LABEL")}"
  download-check-label="${Joomla.Text._("JFIELD_MEDIA_DOWNLOAD_CHECK_LABEL")}"
  download-check-desc-label="${Joomla.Text._("JFIELD_MEDIA_DOWNLOAD_CHECK_DESC_LABEL")}"
  title-label="${Joomla.Text._("JFIELD_MEDIA_TITLE_LABEL")}"
  width-label="${Joomla.Text._("JFIELD_MEDIA_WIDTH_LABEL")}"
  height-label="${Joomla.Text._("JFIELD_MEDIA_HEIGHT_LABEL")}"
></joomla-field-mediamore>
`)}});const isElement=i=>typeof HTMLElement=="object"?i instanceof HTMLElement:i&&typeof i=="object"&&i.nodeType===1&&typeof i.nodeName=="string",getImageSize=i=>new Promise((t,l)=>{const e=new Image;e.src=i,e.onload=()=>{Joomla.selectedMediaFile.width=e.width,Joomla.selectedMediaFile.height=e.height,t(!0)},e.onerror=()=>{l(!1)}}),insertAsImage=async(i,t,l)=>{if(i.url){const{rootFull:e}=Joomla.getOptions("system.paths"),a=i.url.split(e);a.length>1?(Joomla.selectedMediaFile.url=a[1],i.thumb_path?Joomla.selectedMediaFile.thumb=i.thumb_path:Joomla.selectedMediaFile.thumb=!1):i.thumb_path&&(Joomla.selectedMediaFile.url=i.url,Joomla.selectedMediaFile.thumb=i.thumb_path)}else Joomla.selectedMediaFile.url=!1;if(Joomla.selectedMediaFile.url){let e,a="",o="",s="",c="",d="",r="",n="";if(!isElement(t)||t.replaceSelection){const h=t.replaceSelection?t:Joomla.editors.instances[t];if(e=Joomla.Modal.getCurrent().querySelector("joomla-field-mediamore"),e&&(e.getAttribute("alt-check")==="true"&&(s=' alt=""'),o=e.getAttribute("alt-value")?` alt="${e.getAttribute("alt-value")}"`:s,c=e.getAttribute("img-classes")?` class="${e.getAttribute("img-classes")}"`:"",d=e.getAttribute("fig-classes")?` class="image ${e.getAttribute("fig-classes")}"`:' class="image"',r=e.getAttribute("fig-caption")?`${e.getAttribute("fig-caption")}`:"",e.getAttribute("is-lazy")==="true"&&(a=` loading="lazy" width="${Joomla.selectedMediaFile.width}" height="${Joomla.selectedMediaFile.height}"`,Joomla.selectedMediaFile.width===0||Joomla.selectedMediaFile.height===0)))try{await getImageSize(Joomla.selectedMediaFile.url),a=` loading="lazy" width="${Joomla.selectedMediaFile.width}" height="${Joomla.selectedMediaFile.height}"`}catch{a=""}r?n=`<figure${d}><img src="${Joomla.selectedMediaFile.url}"${c}${a}${o} data-path="${Joomla.selectedMediaFile.path}"/><figcaption>${r}</figcaption></figure>`:n=`<img src="${Joomla.selectedMediaFile.url}"${c}${a}${o} data-path="${Joomla.selectedMediaFile.path}"/>`,e&&e.parentNode.removeChild(e),h.replaceSelection(n)}else{if(Joomla.selectedMediaFile.width===0||Joomla.selectedMediaFile.height===0)try{await getImageSize(Joomla.selectedMediaFile.url)}catch{Joomla.selectedMediaFile.height=0,Joomla.selectedMediaFile.width=0}l.markValid(),l.setValue(`${Joomla.selectedMediaFile.url}#joomlaImage://${i.path.replace(":","")}?width=${Joomla.selectedMediaFile.width}&height=${Joomla.selectedMediaFile.height}`)}}},insertAsOther=(i,t,l,e)=>{if(i.url){const{rootFull:o}=Joomla.getOptions("system.paths"),s=i.url.split(o);s.length>1?Joomla.selectedMediaFile.url=s[1]:Joomla.selectedMediaFile.url=i.url}else Joomla.selectedMediaFile.url=!1;let a;if(Joomla.selectedMediaFile.url)if(!isElement(t)||t.replaceSelection){let o;const s=t.replaceSelection?t:Joomla.editors.instances[t];if(a=Joomla.Modal.getCurrent().querySelector("joomla-field-mediamore"),a){const d=a.getAttribute("embed-it");if(d&&d==="true"){if(e==="audios"&&(o=`<audio controls src="${Joomla.selectedMediaFile.url}"></audio>`),e==="documents"){const r=a.getAttribute("title");o=`<object type="application/${Joomla.selectedMediaFile.extension}" data="${Joomla.selectedMediaFile.url}" ${r?`title="${r}"`:""} width="${a.getAttribute("width")}" height="${a.getAttribute("height")}">
  ${Joomla.Text._("JFIELD_MEDIA_UNSUPPORTED").replace("{tag}",`<a download href="${Joomla.selectedMediaFile.url}">`).replace(/{extension}/g,Joomla.selectedMediaFile.extension)}
</object>`}e==="videos"&&(o=`<video controls width="${a.getAttribute("width")}" height="${a.getAttribute("height")}">
  <source src="${Joomla.selectedMediaFile.url}" type="${Joomla.selectedMediaFile.fileType}">
</video>`)}else if(s.getSelection()!=="")o=`<a download href="${Joomla.selectedMediaFile.url}">${s.getSelection()}</a>`;else{const r=/([\w-]+)\./.exec(Joomla.selectedMediaFile.url);o=`<a download href="${Joomla.selectedMediaFile.url}">${Joomla.Text._("JFIELD_MEDIA_DOWNLOAD_FILE").replace("{file}",r[1])}</a>`}}a&&a.parentNode.removeChild(a),s.replaceSelection(o)}else l.markValid(),l.givenType=e,l.setValue(Joomla.selectedMediaFile.url)},execTransform=async(i,t,l)=>{if(i.success===!0){const e=i.data[0],{images:a,audios:o,videos:s,documents:c}=supportedExtensions;if(Joomla.selectedMediaFile.extension&&a.includes(e.extension.toLowerCase()))return insertAsImage(e,t,l);if(Joomla.selectedMediaFile.extension&&o.includes(e.extension.toLowerCase()))return insertAsOther(e,t,l,"audios");if(Joomla.selectedMediaFile.extension&&c.includes(e.extension.toLowerCase()))return insertAsOther(e,t,l,"documents");if(Joomla.selectedMediaFile.extension&&s.includes(e.extension.toLowerCase()))return insertAsOther(e,t,l,"videos")}return""};Joomla.getMedia=(i,t,l)=>new Promise((e,a)=>{if(!i||typeof i=="object"&&(!i.path||i.path==="")){Joomla.selectedMediaFile={},e({resp:{success:!1}});return}const o=Joomla.getOptions("media-picker-api",{}).apiBaseUrl||"index.php?option=com_media&format=json",s=new URL(o,window.location.origin);s.searchParams.append("task","api.files"),s.searchParams.append("url",!0),s.searchParams.append("path",i.path),s.searchParams.append("mediatypes","0,1,2,3"),s.searchParams.append(Joomla.getOptions("csrf.token"),1),fetch(s,{method:"GET",headers:{"Content-Type":"application/json"}}).then(c=>c.json()).then(async c=>e(await execTransform(c,t,l))).catch(c=>a(c))}),Joomla.getImage=Joomla.getMedia;class JoomlaFieldMediaOptions extends HTMLElement{get type(){return this.getAttribute("type")}get parentId(){return this.getAttribute("parent-id")}get lazytext(){return this.getAttribute("lazy-label")}get alttext(){return this.getAttribute("alt-label")}get altchecktext(){return this.getAttribute("alt-check-label")}get altcheckdesctext(){return this.getAttribute("alt-check-desc-label")}get embedchecktext(){return this.getAttribute("embed-check-label")}get embedcheckdesctext(){return this.getAttribute("embed-check-desc-label")}get downloadchecktext(){return this.getAttribute("download-check-label")}get downloadcheckdesctext(){return this.getAttribute("download-check-desc-label")}get classestext(){return this.getAttribute("classes-label")}get figclassestext(){return this.getAttribute("figure-classes-label")}get figcaptiontext(){return this.getAttribute("figure-caption-label")}get summarytext(){return this.getAttribute("summary-label")}get widthtext(){return this.getAttribute("width-label")}get heighttext(){return this.getAttribute("height-label")}get titletext(){return this.getAttribute("title-label")}connectedCallback(){this.type==="images"?(this.innerHTML=`<details open>
<summary>${this.summarytext}</summary>
<div class="">
  <div class="form-group">
    <div class="input-group">
      <label class="input-group-text" for="${this.parentId}-alt">${this.alttext}</label>
      <input class="form-control" type="text" id="${this.parentId}-alt" data-is="alt-value" />
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="${this.parentId}-alt-check">
      <label class="form-check-label" for="${this.parentId}-alt-check">${this.altchecktext}</label>
      <div><small class="form-text">${this.altcheckdesctext}</small></div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="${this.parentId}-lazy" checked>
      <label class="form-check-label" for="${this.parentId}-lazy">${this.lazytext}</label>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <label class="input-group-text" for="${this.parentId}-classes">${this.classestext}</label>
      <input class="form-control" type="text" id="${this.parentId}-classes" data-is="img-classes"/>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <label class="input-group-text" for="${this.parentId}-figclasses">${this.figclassestext}</label>
      <input class="form-control" type="text" id="${this.parentId}-figclasses" data-is="fig-classes"/>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <label class="input-group-text" for="${this.parentId}-figcaption">${this.figcaptiontext}</label>
      <input class="form-control" type="text" id="${this.parentId}-figcaption" data-is="fig-caption"/>
    </div>
  </div>
</div>
</details>`,this.lazyInputFn=this.lazyInputFn.bind(this),this.altCheckFn=this.altCheckFn.bind(this),this.inputFn=this.inputFn.bind(this),this.lazyInput=this.querySelector(`#${this.parentId}-lazy`),this.lazyInput.addEventListener("change",this.lazyInputFn),this.altCheck=this.querySelector(`#${this.parentId}-alt-check`),this.altCheck.addEventListener("input",this.altCheckFn),[].slice.call(this.querySelectorAll('input[type="text"]')).map(t=>{t.addEventListener("input",this.inputFn);const{is:l}=t.dataset;return l&&this.setAttribute(l,t.value.replace(/"/g,"&quot;")),t}),this.setAttribute("is-lazy",!!this.lazyInput.checked),this.setAttribute("alt-check",!1)):["audios","videos","documents"].includes(this.type)&&(this.innerHTML=`<details open>
<summary>${this.summarytext}</summary>
<div class="">
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input radio" type="radio" name="flexRadioDefault" id="${this.parentId}-embed-check-2" value="0" checked>
      <label class="form-check-label" for="${this.parentId}-embed-check-2">
        ${this.downloadchecktext}
        <div><small class="form-text">${this.downloadcheckdesctext}</small></div>
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input radio" type="radio" name="flexRadioDefault" id="${this.parentId}-embed-check-1" value="1">
      <label class="form-check-label" for="${this.parentId}-embed-check-1">
        ${this.embedchecktext}
        <div><small class="form-text">${this.embedcheckdesctext}</small></div>
      </label>
    </div>
  </div>
  <div class="toggable-parts" style="display: none">
    <div style="display: ${this.type==="audios"?"none":"block"}">
      <div class="form-group">
        <div class="input-group">
          <label class="input-group-text" for="${this.parentId}-width">${this.widthtext}</label>
          <input class="form-control" type="text" id="${this.parentId}-width" value="800" data-is="width"/>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <label class="input-group-text" for="${this.parentId}-height">${this.heighttext}</label>
          <input class="form-control" type="text" id="${this.parentId}-height" value="600" data-is="height"/>
        </div>
      </div>
      <div style="display: ${this.type==="document"?"block":"none"}">
        <div class="form-group">
          <div class="input-group">
            <label class="input-group-text" for="${this.parentId}-title">${this.titletext}</label>
            <input class="form-control" type="text" id="${this.parentId}-title" value="" data-is="title"/>
          </div>
        </div>
    </div>
  </div>
</div>
</details>`,this.embedInputFn=this.embedInputFn.bind(this),this.inputFn=this.inputFn.bind(this),[].slice.call(this.querySelectorAll(".form-check-input.radio")).map(t=>t.addEventListener("input",this.embedInputFn)),this.setAttribute("embed-it",!1),[].slice.call(this.querySelectorAll('input[type="text"]')).map(t=>{t.addEventListener("input",this.inputFn);const{is:l}=t.dataset;return l&&this.setAttribute(l,t.value.replace(/"/g,"&quot;")),t}))}disconnectedCallback(){this.type==="image"&&(this.lazyInput.removeEventListener("input",this.lazyInputFn),this.altInput.removeEventListener("input",this.inputFn),this.altCheck.removeEventListener("input",this.altCheckFn)),["audio","video","document"].includes(this.type)&&([].slice.call(this.querySelectorAll(".form-check-input.radio")).map(t=>t.removeEventListener("input",this.embedInputFn)),[].slice.call(this.querySelectorAll('input[type="text"]')).map(t=>t.removeEventListener("input",this.embedInputFn))),this.innerHTML=""}lazyInputFn(t){this.setAttribute("is-lazy",!!t.target.checked)}altCheckFn(t){this.setAttribute("alt-check",!!t.target.checked)}inputFn(t){const{is:l}=t.target.dataset;l&&this.setAttribute(l,t.target.value.replace(/"/g,"&quot;"))}embedInputFn(t){const{value:l}=t.target;this.setAttribute("embed-it",l!=="0");const e=this.querySelector(".toggable-parts");e&&(e.style.display!=="block"?e.style.display="block":e.style.display="none")}}customElements.define("joomla-field-mediamore",JoomlaFieldMediaOptions);