import React from"react";import{renderFocus}from"./common.js";import{CssClasses}from"./constants.js";import FormElementOuter from"./FormElementOuter.js";import{isFilesRef,makeSafeClassName}from"./utils.js";import{renderCrossAdd,renderRemove}from"./assets/stock.js";function renderFilePicker(a,r){const{host:s,name:t}=a.props;var e=r.size;let n=r.value,i=5,l;"number"==typeof e&&(i=1<e?Math.ceil(e):1),n&&(isFilesRef(n)&&Array.isArray(n.files)||(r.value=n=void 0));var c=s.renderText(r.tooltip);let o=a.enabled;const m=[];if(void 0!==n){o=a.enabled&&n.files.length<i;for(const u of n.files){var d=m.length;m.push(React.createElement("div",{className:"file",key:"$"+d},React.createElement("div",null,React.createElement("label",null,u.name),React.createElement("button",{"aria-label":s.renderText("@file-picker-remove-item-label"),className:"delete",disabled:!a.enabled,ref:e=>renderFocus(e,t,s),onClick:(e=>()=>{1<n.files.length?n.files.splice(e,1):r.value=void 0,a.forceUpdate(),s.post("changed",{name:t,value:r.value})})(d)},renderRemove()))))}}const f=e=>{if(e){var t=e.getAttribute("class");if(/\bneedsclick\b/.test(t)||e.setAttribute("class",t?t+" needsclick":"needsclick"),"svg"!==e.tagName){var l=e.children;for(let e=0;e<l.length;e++)f(l[e])}}};m.push(React.createElement("div",{className:"add-file",key:"footer"},React.createElement("button",{className:"add",disabled:!o,title:c,ref:e=>{renderFocus(e,t,s),f(e)},onClick:()=>{l.value=null,l.click()}},renderCrossAdd(),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:{__html:s.renderHtml(r.prompt)}}))));const p=[r.type,makeSafeClassName(t)];e=1!==i;return React.createElement(FormElementOuter,{className:p.join(" "),component:a,element:r,errorClassName:CssClasses.ERROR},React.createElement("div",{className:"items"},m),React.createElement("input",{type:"file",style:{display:"none"},title:c,onChange:e=>(e=>{var t=e.files;if(t&&t.length){const l=n&&n.files||[];for(let e=0;e<t.length&&l.length!==i;e++)l.push(t[e]);e={refValueType:"files",files:l};r.value=e,a.forceUpdate(),s.post("changed",{name:a.props.name,value:e})}})(e.target),multiple:e,accept:r.fileTypes,ref:e=>{l=e}}))}export{renderFilePicker};