import React,{useCallback,useMemo,useState}from"react";import{CssClasses}from"../constants.js";import FormElementOuter from"../FormElementOuter.js";import{getProcessedNumberFormat,getInitialNumberSliderValues}from"../numberSliderUtilities.js";import{Range,getTrackBackground}from"react-range";import{makeSafeClassName,throttle}from"../utils.js";import{isIE}from"../../BrowserUtils.js";import{renderFocus}from"../common.js";let lastChangeEventValues;const NumberRangeSlider=e=>{const r=e.component,t=e.element,a=useMemo(()=>getProcessedNumberFormat(t.format),[]),[n,s]=useState(useMemo(()=>(t.value=getInitialNumberSliderValues(t.value,a),t.value),[])),[o,l]=useState(t.value),{host:c,name:i}=r.props,u=useCallback(e=>{e instanceof Range&&(e=e.thumbRefs[0].current),renderFocus(e,i,c)},[]),{lowerBound:m,upperBound:p,precision:d}=a,{showMinMaxLabels:g,manualEntry:v}=t;let f=a.step,b=t.showTickMarks;b=0<f&&b,0===f&&(f=1/Math.pow(10,d));const h=!r.enabled,x={currency:a.currency,customDisplayFormat:a.customDisplayFormat,format:a.displayFormat,fractionalDigits:d,locale:c.deriveLocale()};e=c.renderText(t.tooltip);const y=[t.type,makeSafeClassName(i)],E=e=>{e=N(e),F(e),(Array.isArray(lastChangeEventValues)||e[0]===m&&e[1]===p)&&(!Array.isArray(lastChangeEventValues)||e[0]===lastChangeEventValues[0]&&e[1]===lastChangeEventValues[1])||(t.value=lastChangeEventValues=e,c.post("changed",{name:i,value:t.value}))};const C=e=>{r.autoInput=!0},R=e=>e.target.select(),N=e=>{let t=e[0]<m?m:e[0]>p?p:e[0],a=e[1]>p?p:e[1]<m?m:e[1];return[t,a].sort((e,t)=>e-t)},k=useMemo(()=>throttle(e=>{c.post("dragged",{name:i,value:e})}),[]),w=(e,t)=>{const a=n.slice();let r=""!==e?Number(e):NaN;isNaN(r)?F(a):(0===t?(r<m&&(r=m),r>a[1]&&(r=a[1])):(r>p&&(r=p),r<a[0]&&(r=a[0])),a[t]=r,E(a))},F=e=>{s(e),l(e)};const S=(e,t,a,r,s="#fff",n="#197dc8")=>React.createElement("div",{style:{position:"absolute",top:t,color:s,fontWeight:"bold",fontSize:"14px",fontFamily:"Arial,Helvetica Neue,Helvetica,sans-serif",padding:"4px",borderRadius:"5px",backgroundColor:n,left:a,right:r,whiteSpace:"nowrap"}},e);return React.createElement(FormElementOuter,{className:y.join(" "),component:r,element:t,errorClassName:CssClasses.ERROR},!isIE()&&React.createElement("div",{className:"slider-container",title:e},React.createElement(Range,{draggableTrack:!0,step:f,min:m,max:p,values:n,onChange:e=>{e=N(e),F(e),Array.isArray(t.value)&&e[0]===t.value[0]&&e[1]===t.value[1]||(t.value=e,k(t.value))},onFinalChange:E,renderMark:e=>{var{props:t,index:a}=e,e=m+a*f,a=e>p,e=e>n[0]&&e<n[1]?"#197dc8":"#ccc";return b&&!a&&React.createElement("div",Object.assign({},t,{style:{...t.style,height:"16px",width:"2px",backgroundColor:e}}))},renderTrack:e=>{var{props:t,children:e}=e;return React.createElement("div",Object.assign({},t,{style:{...t.style,height:"6px",margin:"50px 0px 24px",width:"100%",background:getTrackBackground({values:n,colors:["#ccc","#197dc8","#ccc"],min:m,max:p,rtl:!1})}}),!1!==g&&S(c.formatNumber(m,x,!0),"20px","-12px",void 0,"#333","#fff"),!1!==g&&S(c.formatNumber(p,x,!0),"20px",void 0,"-12px","#333","#fff"),e)},renderThumb:e=>{var{props:t,value:a,index:r}=e,s=p-m,e=a-m,a=e<s/10?"0":"auto",e=9*s/10<e?"0":"auto";return React.createElement("div",Object.assign({},t,{style:{...t.style,height:"24px",width:"24px",borderRadius:"12px",backgroundColor:"#197dc8",display:"flex",justifyContent:"center",alignItems:"center",boxShadow:"0px 2px 4px #AAA",outline:"none"}}),S(c.formatNumber(n[r],x,!0),"-32px",a,e))},disabled:h,ref:u})),!1!==v||isIE()?React.createElement("div",{className:"inputs"},o.map((e,t)=>React.createElement("span",null,0===t?c.renderText("@common-start"):c.renderText("@common-end"),React.createElement("input",{key:t,type:"number",disabled:h,min:0===t?m:n[0],max:0===t?n[1]:p,step:f,title:e+"",value:e,onBlur:e=>((e,t)=>{w(e.target.value,t)})(e,t),onChange:e=>((e,t)=>{const a=o.slice();a[t]=e.target.value,l(a),r.autoInput&&w(e.target.value,t)})(e,t),onKeyDown:e=>((e,t)=>{e.stopPropagation(),r.autoInput=!1,"Enter"===e.key?w(o[t]+"",t):"Escape"===e.key&&F(n.slice())})(e,t),onMouseDown:C,onFocus:R,ref:0===t&&isIE()?u:void 0})))):null)};export default NumberRangeSlider;