import{_ as __rest,a as __assign}from"./tslib.es6-bjGg6Bxl.js";import React__default,{useState,useEffect,useCallback}from"react";import{I as Icon}from"./Icon.component-7-ap-6Ys.js";import{S as Stack}from"./Stack.component-BNRLhyTo.js";var getWrapperStyles=function(a){return"rounded"===a?"".concat("jn-relative jn-inline-block jn-win-max"," jn-w-auto"):"hero"===a?"".concat("jn-relative jn-inline-block jn-win-max"," jn-w-full"):"".concat("jn-relative jn-inline-block jn-win-max"," jn-w-auto")},getSearchStyles=function(a){var b="jn-rounded-full focus:jn-rounded-full";return"rounded"===a?"".concat("\n    jn-bg-theme-textinput\n    jn-text-theme-high\n    jn-shadow\n    jn-w-full\n    focus:jn-outline-none\n    focus:jn-ring-2\n    focus:jn-ring-theme-focus\n    disabled:jn-cursor-not-allowed\n    disabled:jn-opacity-50\n  "," ").concat(b," jn-text-base jn-w-auto jn-pl-3 jn-pr-16 jn-py-1"):"hero"===a?"".concat("\n    jn-bg-theme-textinput\n    jn-text-theme-high\n    jn-shadow\n    jn-w-full\n    focus:jn-outline-none\n    focus:jn-ring-2\n    focus:jn-ring-theme-focus\n    disabled:jn-cursor-not-allowed\n    disabled:jn-opacity-50\n  "," ").concat(b," jn-text-lg jn-w-full jn-pl-6 jn-pr-20 jn-py-2.5"):"".concat("\n    jn-bg-theme-textinput\n    jn-text-theme-high\n    jn-shadow\n    jn-w-full\n    focus:jn-outline-none\n    focus:jn-ring-2\n    focus:jn-ring-theme-focus\n    disabled:jn-cursor-not-allowed\n    disabled:jn-opacity-50\n  "," jn-rounded jn-text-base jn-leading-4 jn-pl-4 jn-pr-16 jn-py-2.5")},getIconWrapperStyles=function(a){return"rounded"===a?"jn-absolute jn-inline-flex jn-right-3 jn-top-1":"hero"===a?"jn-absolute jn-inline-flex jn-right-5":"jn-absolute jn-inline-flex jn-right-3 jn-top-2"},getClearIconStyles=function(a){return"hero"===a?"jn-mr-2.5":"jn-mr-2"},getClearIconSize=function(a){return"hero"===a?"24":"18"},SearchInput=function(a){var b=a.value,c=void 0===b?"":b,d=a.name,e=void 0===d?"search":d,f=a.variant,g=void 0===f?"default":f,h=a.disabled,i=void 0!==h&&h,j=a.clear,k=a.onSearch,l=a.onChange,m=a.onClick,n=a.onKeyPress,o=a.onClear,p=a.autoComplete,q=void 0===p?"off":p,r=a.placeholder,s=void 0===r?"Search\u2026":r,t=a.className,u=void 0===t?"":t,v=__rest(a,["value","name","variant","disabled","clear","onSearch","onChange","onClick","onKeyPress","onClear","autoComplete","placeholder","className"]),w=useState(c),x=w[0],y=w[1];useEffect(function(){y(c)},[c]);var z=useCallback(function(a){y(a.target.value),null===l||void 0===l?void 0:l(a)},[l]),A=useCallback(function(a){"Enter"===a.key&&k&&k(x),null===n||void 0===n?void 0:n(a)},[k,n,x]),B=useCallback(function(a){null===k||void 0===k?void 0:k(x),null===m||void 0===m?void 0:m(a)},[k,m,x]),C=useCallback(function(a){y(""),null===o||void 0===o?void 0:o(a)},[o]);return React__default.createElement("div",{className:"juno-search-input-wrapper ".concat(getWrapperStyles(g)," ").concat(u),role:"search"},React__default.createElement(Stack,{gap:"2",alignment:"center"},React__default.createElement("input",__assign({type:"search",name:e,placeholder:s,disabled:i,value:x,autoComplete:q,className:"juno-search-input ".concat(getSearchStyles(g)),onChange:z,onKeyPress:A},v)),React__default.createElement("div",{className:getIconWrapperStyles(g)},(!(void 0!==j)||j)&&0<(null===x||void 0===x?void 0:x.length)&&(React__default.createElement(Icon,{icon:"close",size:getClearIconSize(g),title:"Clear",className:getClearIconStyles(g),onClick:C,disabled:i})),React__default.createElement(Icon,{icon:"search",title:"Search",onClick:B,disabled:i}))))};export{SearchInput as S};