import{_ as _extends}from"./_rollupPluginBabelHelpers-B5fk9IVe.js";import React__default,{useState,useEffect}from"react";import PropTypes from"prop-types";import{N as NativeSelect}from"./NativeSelect.component-DtTnqH-z.js";import{N as NativeSelectOption}from"./NativeSelectOption.component-ozgJZgGf.js";import{T as TextInput}from"./TextInput.component-CkNlIlj0.js";import{I as Icon}from"./Icon.component-BVkaZqpA.js";const wrapperStyles=`
	jn-flex
	jn-relative
	jn-p-px
	jn-border
	jn-rounded
	jn-bg-theme-filter-input
`,defaultWrapperStyles=`
  jn-border-theme-filter-input
`,errorWrapperStyles=`
  jn-border-theme-error
`,selectStyles=`
	jn-rounded-r-none
`,textInputStyles=`
	jn-grow
	jn-rounded-l-none
	jn-pr-16
	!jn-bg-theme-filter-input-textinput
	focus:jn-z-40
`,iconWrapperStyles=`
	jn-absolute
	jn-flex
	jn-right-2
	jn-top-1.5
	jn-z-50
`,FilterInput=a=>{let{keyLabel:d="Select Filter",options:e=[],selectedFilterKey:f="",onSelectedFilterKeyChange:g=void 0,valueLabel:h="Filter by Value",filterValue:i="",valuePlaceholder:j="",onFilterValueChange:k=void 0,onClear:l=void 0,onFilter:m=void 0,loading:n=!1,className:o="",error:p=!1,onKeyPress:b,...c}=a;const[q,r]=useState(f),[s,t]=useState(i),[u,v]=useState(1>e.length||n),[w,x]=useState(p);useEffect(()=>{t(i)},[i]),useEffect(()=>{r(f)},[f]),useEffect(()=>{1>e.length||n?(v(!0),t("")):v(!1)},[e,n]),useEffect(()=>{x(p)},[p]);return React__default.createElement("div",_extends({className:`juno-filter-input ${wrapperStyles} ${u?"juno-filter-input-loading ":""} ${w?"juno-filter-input-error ":""} ${w?errorWrapperStyles:defaultWrapperStyles} ${o}`},c),React__default.createElement("div",null,React__default.createElement(NativeSelect,{className:`juno-filter-input-select ${selectStyles}`,"aria-label":d,value:q,onChange:a=>{r(a.target.value),t(""),g&&g(a)},loading:u,error:w},React__default.createElement(NativeSelectOption,{label:d||"Select Filter",value:""}),e.map((a,b)=>React__default.createElement(NativeSelectOption,_extends({label:a.label,value:a.key,key:`${b}`},a))))),React__default.createElement(TextInput,{value:s,className:`${textInputStyles}`,"aria-label":h,onChange:a=>{t(a.target.value),k&&k(a)},onKeyPress:a=>{"Enter"===a.key&&m&&m&&m(s),b&&b(a)},disabled:u||w,placeholder:u?"Loading Filter Options\u2026":j}),React__default.createElement("div",{className:`${iconWrapperStyles}`},s&&s.length?React__default.createElement(Icon,{icon:"close",title:"Clear",size:"18",className:`jn-mr-2`,onClick:a=>{t(""),l&&l(a)}}):null,React__default.createElement(Icon,{icon:"filterAlt",title:"Filter",disabled:u||w,onClick:()=>{m&&m(s)}})))};FilterInput.propTypes={keyLabel:PropTypes.string,options:PropTypes.arrayOf(PropTypes.object),selectedFilterKey:PropTypes.string,onSelectedFilterKeyChange:PropTypes.func,valueLabel:PropTypes.string,filterValue:PropTypes.string,valuePlaceholder:PropTypes.string,onFilterValueChange:PropTypes.func,onClear:PropTypes.func,onKeyPress:PropTypes.func,loading:PropTypes.bool,className:PropTypes.string,onFilter:PropTypes.func,error:PropTypes.bool};export{FilterInput as F};