import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { ref as ref_js_ref } from "lit/directives/ref.js";
import { when } from "lit/directives/when.js";
import { renderTextAreaClearButton } from "./text-area-clear-button.js";
function syncTextWithReplica(ref, value) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (!parent || elem?.value === '\n') return;
    parent.dataset.replicatedValue = value ?? elem?.value;
}
function resetReplicaText(ref) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (parent) delete parent.dataset.replicatedValue;
}
function collapseTextArea(ref) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (parent) parent.classList.remove('expanded');
}
function expandTextArea(ref) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (parent) parent.classList.add('expanded');
}
const renderSearchBoxTextArea = ({ props: { textAreaRef, loading, i18n, onInput, onFocus, onBlur, onChange, onKeyDown, onKeyUp, value, ariaLabel, title, onClear, popup } })=>html`<div class="flex grow overflow-hidden">
    <div part="textarea-expander" class="grid grow overflow-hidden">
      <textarea
        title=${title}
        part="textarea"
        aria-label=${ariaLabel}
        placeholder=${i18n.t('search')}
        class="placeholder-neutral-dark"
        rows="1"
        @input=${(e)=>{
        onInput?.(e);
        syncTextWithReplica(textAreaRef);
    }}
        @keydown=${(e)=>{
        syncTextWithReplica(textAreaRef);
        if ('Enter' === e.key && !e.shiftKey) e.preventDefault();
        onKeyDown?.(e);
    }}
        @keyup=${(e)=>{
        onKeyUp?.(e);
        if ('Enter' === e.key && !e.shiftKey) return void e.preventDefault();
        syncTextWithReplica(textAreaRef);
    }}
        @blur=${(e)=>{
        onBlur?.(e);
        collapseTextArea(textAreaRef);
        syncTextWithReplica(textAreaRef);
    }}
        @change=${(e)=>{
        onChange?.(e);
        syncTextWithReplica(textAreaRef);
    }}
        @focus=${(e)=>{
        onFocus?.(e);
        const target = e.target;
        syncTextWithReplica(textAreaRef ?? target);
        expandTextArea(textAreaRef ?? target);
    }}
        autocomplete="off"
        autocapitalize="off"
        aria-activedescendant=${ifDefined(popup.activeDescendant)}
        aria-autocomplete="both"
        aria-haspopup="true"
        aria-controls=${popup?.id}
        .value=${value}
        ${ref_js_ref(textAreaRef)}
      ></textarea>
    </div>
    ${when(loading, ()=>html`<div class="ml-2 flex items-center justify-center">
          <span
            part="loading"
            class="loading mr-2 grid h-5 w-5 animate-spin place-items-center rounded-full bg-linear-to-r"
          ></span>
        </div>`)}
    ${when(!loading && 0 !== value.length, ()=>html`${renderTextAreaClearButton({
            props: {
                textAreaRef,
                i18n,
                onClick: ()=>{
                    onClear();
                    resetReplicaText(textAreaRef);
                }
            }
        })}`)}
  </div>`;
export { renderSearchBoxTextArea };
