import React from"react";import{CssClasses}from"./constants.js";import FormElementOuter from"./FormElementOuter.js";import{getKeyString}from"./keyboard.js";import{makeSafeClassName,sanitizeGeometryRef,setClass,text}from"./utils.js";import{renderCrossAdd,renderArrowRollup,renderRemove}from"./assets/stock.js";import{renderFocus}from"./common.js";class StateTrackingElement extends React.Component{render(){return React.createElement("div",Object.assign({ref:e=>this.root=e},this.props))}}function renderGeometryPicker(t,n){var e=t.props;const s=e.name,a=e.host;let r=5;var o=n.size;"number"==typeof o&&(r=1<o?Math.ceil(o):1);let c,l,i="✎",d=n.value=sanitizeGeometryRef(n.value);void 0!==d&&(c=d.geometry,R=n.itemLabel,Array.isArray(R)?l=R:(l=[],text.isMarkdown(R)?R.markdown&&(i=R):text.isStatus(R)?R.status&&(i=R.status):R&&(i=R)));let u=n.state;function m(e){let t=u[e];return void 0!==t&&null!==t||(u.length<=e&&(u.length=e,u.push({})),t=u[e]),t}void 0!==u&&null!==u||(u=n.state=[]);const f=t.enabled;function p(t,n=!0){let r;function o(){const e=m(t);e.checked=f&&r.checked,e.focused=f&&r.focused,e.pending=f&&r.pending,n&&a.renderState(s,"geometry",u),setClass(r.root,"checked",e.checked),setClass(r.root,"focus",e.focused),setClass(r.root,"hover",e.pending)}return{ref(e){r=e,null!==r&&o()},onChangeCapture:function(e){r&&(r.checked=null!==e.currentTarget.querySelector("input:checked"),o())},onFocusCapture:function(e){r&&(r.focused=!0,o())},onBlurCapture:function(){r&&(r.focused=!1,o())},onMouseOver:function(){r&&(r.pending=!0,o())},onMouseOut:function(){r&&(r.pending=!1,o())},onKeyDownCapture(e){f&&"delete"===getKeyString(e)&&void 0!==m(t).content&&g(t)()}}}function g(e){return function(){1<c.length?(c.splice(e,1),u.splice(e,1),e<l.length&&l.splice(e,1)):(n.value=void 0,n.state=void 0),t.forceUpdate(),a.post("changed",{name:s,value:d})}}let h=t.enabled;const v=[];if(void 0!==d){h=t.enabled&&d.geometry.length<r;for(const E of d.geometry){const y=v.length;m(y).content=E;var k={__html:a.renderHtml(l[y]||i)};v.push(React.createElement(StateTrackingElement,Object.assign({className:"shape",key:"$"+y},p(y)),React.createElement("div",null,React.createElement("label",null,React.createElement("input",{type:"checkbox",disabled:!t.enabled,ref:function(t){return function(e){null!==e&&(e.disabled||a.renderFocus(e,s),e.checked=m(t).checked)}}(y)}),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:k})),React.createElement("button",{className:"delete",disabled:!t.enabled,ref:e=>renderFocus(e,s,a),onClick:g(y)},renderRemove()))))}}function C(){a.post("clicked",{name:s,value:d})}void 0!==d&&d.format;e={__html:a.renderHtml(n.prompt)},o=a.renderText(n.tooltip);const y=v.length;var R=t.enabled&&void 0!==d;v.push(React.createElement(StateTrackingElement,Object.assign({className:"add-shape",key:"footer"},p(y,!1)),React.createElement("button",{className:"add",disabled:!h,title:o,ref:e=>renderFocus(e,s,a),onClick:C},renderCrossAdd(),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:e})),React.createElement("button",{className:"clear",disabled:!R,ref:e=>renderFocus(e,s,a),onClick:function(){d=n.value=void 0,t.forceUpdate(),a.post("changed",{name:s,value:d})}},renderArrowRollup())));const b=[n.type,makeSafeClassName(s)];return 1===r&&b.push(CssClasses.SINGLE),void 0!==d&&d.geometry.length>=r&&b.push(CssClasses.FULL),t.enabled&&n.autoActivate&&(h&&setTimeout(()=>C()),delete n.autoActivate),React.createElement(FormElementOuter,{className:b.join(" "),component:t,element:n,errorClassName:CssClasses.ERROR,ref:function(e){null===e&&a.renderState(s,"geometry")}},React.createElement("div",{className:"items"},v))}export{renderGeometryPicker};