import React__default, { useRef, useState } from 'react';
import classnames from 'classnames';
import { tokens } from '@jobber/design';
import { useDebounce } from '@jobber/hooks';
import { InputText } from './InputText/index.mjs';
import { u as useDataListContext } from './DataListContext-es.js';
import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
import { B as Button } from './Button-es.js';
import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';

var styles = {"wrapper":"S2Bu0Rv4w-E-","searchInput":"N8dyu-defmc-","searchInputVisible":"UhMQC1SZUns-","searchButton":"zQPIm20aF50-","withNoFilters":"oOqZupWkemo-","spinning":"Wq63M3dVuYs-"};

const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
// This component is meant to capture the props of the DataList.Search
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function DataListSearch(_) {
    return null;
}
/**
 * Renders the DataList.Search component.
 */
function InternalDataListSearch() {
    const inputRef = useRef(null);
    const [visible, setVisible] = useState(false);
    const { searchComponent, filterComponent, sorting, title } = useDataListContext();
    const debouncedSearch = useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY);
    if (!searchComponent)
        return null;
    const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
    return (React__default.createElement("div", { className: classnames(styles.wrapper, {
            [styles.withNoFilters]: !filterComponent && !sorting,
        }) },
        React__default.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
                [styles.searchInputVisible]: visible,
            }) },
            React__default.createElement(InputText
            // If the initial value changes, reset the input.
            , { 
                // If the initial value changes, reset the input.
                key: initialValue, defaultValue: initialValue, value: controlledValue, ref: inputRef, placeholder: getPlaceholder(), onChange: controlledValue !== undefined
                    ? searchComponent.props.onSearch
                    : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
        React__default.createElement("div", { className: styles.searchButton },
            React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
    function getPlaceholder() {
        if (placeholder)
            return placeholder;
        if (title)
            return `Search ${title}...`;
        return `Search...`;
    }
    function toggleSearch() {
        const visibility = !visible;
        setVisible(visibility);
        if (visibility && inputRef.current) {
            setTimeout(inputRef.current.focus, tokens["timing-quick"]);
        }
    }
}

export { DATA_LIST_SEARCH_TEST_ID as D, InternalDataListSearch as I, DataListSearch as a };
