import{L as e,a,j as n,O as r,C as t,P as o,H as l,I as i}from"../../vendor.js";import{useReducer as s,useEffect as c}from"react";import"react-popper";import"react-dom";import{a as u}from"../../hooks.js";var d=function(d){var p=d.className,v=d.value,m=d.onChange,g=d.accept,f=void 0===g?["image/jpeg","image/jpg","image/png","image/svg+xml"]:g,x=u().events,k=s(e,{value:v||"",loading:!1}),j=a(k,2),h=j[0],b=j[1];c((function(){v&&b({value:v})}),[v]);var N=function(){var e=l(i.mark((function e(a){var n,r,t;return i.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!h.loading){e.next=2;break}return e.abrupt("return");case 2:if(b({loading:!0}),null==x||!x.onImageUpload){e.next=10;break}return e.next=6,x.onImageUpload(event);case 6:n=e.sent,C(n),e.next=12;break;case 10:(r=a.target.files[0])?((t=new FileReader).readAsDataURL(r),t.onload=function(){C({url:t.result})}):b({loading:!1});case 12:case"end":return e.stop()}}),e)})));return function(a){return e.apply(this,arguments)}}(),C=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},a=e.url;b({value:a}),null==m||m({value:a}),b({loading:!1})};return n.exports.jsx(r,{className:t("oak-core-image-field",p),disabled:h.loading,onClick:h.value?function(e){e.preventDefault(),b({value:null}),null==m||m({value:null})}:function(e){if(e.preventDefault(),!h.loading){var a=document.createElement("input");a.type="file",a.accept=f.join(","),a.addEventListener("change",N,!1),a.click()}},style:{backgroundImage:h.value&&"url(".concat(h.value,")")},children:h.loading?n.exports.jsx(o,{}):h.value?n.exports.jsx("div",{className:"oak-remove",children:n.exports.jsx("i",{className:"oak-icons",children:"close"})}):n.exports.jsx("i",{className:"oak-icons",children:"add"})})};export{d as C};
//# sourceMappingURL=index.js.map
