import React, { useEffect, useMemo, useRef } from "react";
import { Icons } from "../../../assets";
import { useDebouncedCallback } from "../../hooks";
import { Input } from "..";
import styled from "styled-components";
import { withTokens } from "../../libs";
const Wrapper = styled.div `
  ${withTokens("colors-border-active-default", "radius-s")}

  &:focus-within {
    box-shadow: inset 0 0 0 2px var(--colors-border-active-default);
  }
  border-radius: var(--radius-s, 8px);
`;
export function Search({ onDebouncedChange, debounceTime = 500, onChange, autoFocus = true, ...props }) {
    const initialValue = props.value ?? props.defaultValue ?? "";
    const prevValue = useRef(String(initialValue));
    const searchInputRef = useRef(null);
    useEffect(() => {
        if (autoFocus && searchInputRef.current) {
            // Delay focus to prevent layout shifts
            setTimeout(() => {
                searchInputRef.current?.focus({ preventScroll: true });
            }, 0);
        }
    }, [autoFocus]);
    const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
        if (!onDebouncedChange)
            return;
        return (event) => {
            const current = event.target.value;
            onDebouncedChange(current, prevValue.current);
            prevValue.current = current;
        };
    }, [onDebouncedChange]), debounceTime);
    const handleChange = useMemo(() => {
        if (!handleDebouncedChange && !onChange)
            return;
        return (event) => {
            onChange?.(event);
            handleDebouncedChange?.(event);
        };
    }, [handleDebouncedChange, onChange]);
    return (React.createElement(Wrapper, null,
        React.createElement(Input, { ...props, ref: searchInputRef, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange })));
}
//# sourceMappingURL=Search.js.map