/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
import "./HeaderSearch.scss";
import * as React from "react";
import { SearchBox } from "@itwin/itwinui-react";
import { SvgClose, SvgSearch } from "@itwin/itwinui-icons-react";
/**
 * A collapsible search box component for widget headers.
 * Provides an expandable search input with icons that automatically focuses when expanded.
 * @internal
 */
export function HeaderSearch(props) {
    const [isExpanded, setIsExpanded] = props.searchExpandedState;
    const [searchText, setSearchText] = props.searchState;
    const inputRef = React.useRef(null);
    React.useEffect(() => {
        if (!isExpanded)
            return;
        const el = inputRef.current;
        if (!el)
            return;
        // Focus on next animation frame to allow expand animation / layout to settle.
        const id = requestAnimationFrame(() => {
            el.focus();
            const v = el.value;
            if (v)
                el.selectionStart = el.selectionEnd = v.length;
        });
        return () => cancelAnimationFrame(id);
    }, [isExpanded]);
    return (React.createElement(SearchBox, { onExpand: () => setIsExpanded(true), isExpanded: isExpanded, className: "nz-widget-widgetContentLayout-header-headerSearch", expandable: true, size: props.iconSize },
        React.createElement(SearchBox.CollapsedState, null,
            React.createElement(SearchBox.ExpandButton, { label: "Search", labelProps: { placement: "bottom" }, size: props.iconSize, styleType: "borderless" },
                React.createElement(SvgSearch, null))),
        React.createElement(SearchBox.ExpandedState, null,
            React.createElement(SearchBox.Icon, { size: props.iconSize },
                React.createElement(SvgSearch, null)),
            React.createElement(SearchBox.Input, { ref: inputRef, onChange: (e) => {
                    setSearchText(e.currentTarget.value);
                    props.onSearch?.(e.currentTarget.value);
                }, value: searchText }),
            React.createElement(SearchBox.CollapseButton, { size: props.iconSize, label: "Clear", labelProps: { placement: "bottom" }, onClick: () => {
                    setIsExpanded(false);
                    setSearchText("");
                    if (searchText)
                        props.onSearch?.("");
                } },
                React.createElement(SvgClose, null)))));
}
//# sourceMappingURL=HeaderSearch.js.map