import { html } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { when } from "lit/directives/when.js";
import images_close from "../../../../images/close.js";
import images_search from "../../../../images/search.js";
import "../../atomic-icon/atomic-icon.js";
import { renderButton } from "../../button.js";
const inputRef = createRef();
const renderFacetSearchInput = ({ props })=>{
    const label = props.i18n.t(props.label);
    const search = props.i18n.t('facet-search-input');
    const facetSearch = props.i18n.t('facet-search', {
        label
    });
    const clear = props.i18n.t('clear');
    return html`
    <div class="mt-3 px-2" part="search-wrapper">
      <div class="relative h-10">
        <input
          ${ref(inputRef)}
          part="search-input"
          class="input-primary placeholder-neutral-dark group h-full w-full px-9 text-sm"
          type="text"
          placeholder=${search}
          aria-label=${facetSearch}
          .value=${props.query}
          @input=${(e)=>props.onChange(e.target.value)}
        />
        <div
          class="search-icon text-on-background pointer-events-none absolute left-0 inline-flex h-full w-9 items-center justify-center"
        >
          <atomic-icon part="search-icon" .icon=${images_search}></atomic-icon>
        </div>
        ${when('' !== props.query, ()=>renderButton({
            props: {
                style: 'text-transparent',
                title: clear,
                class: 'search-clear-button absolute top-px right-px bottom-px inline-flex w-9 items-center justify-center',
                onClick: ()=>{
                    props.onClear();
                    inputRef.value?.focus();
                }
            }
        })(html`<atomic-icon
              part="search-clear-button"
              .icon=${images_close}
            ></atomic-icon>`))}
      </div>
    </div>
  `;
};
export { renderFacetSearchInput };
