'use strict';

var React = require('react');
var classnames = require('classnames');
var design = require('@jobber/design');
var jobberHooks = require('@jobber/hooks');
var InputText_index = require('./InputText/index.cjs');
var DataListContext = require('./DataListContext-cjs.js');
var DataList_const = require('./DataList.const-cjs.js');
var Button = require('./Button-cjs.js');
var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.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 = React.useRef(null);
    const [visible, setVisible] = React.useState(false);
    const { searchComponent, filterComponent, sorting, title } = DataListContext.useDataListContext();
    const debouncedSearch = jobberHooks.useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY);
    if (!searchComponent)
        return null;
    const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
    return (React.createElement("div", { className: classnames(styles.wrapper, {
            [styles.withNoFilters]: !filterComponent && !sorting,
        }) },
        React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
                [styles.searchInputVisible]: visible,
            }) },
            React.createElement(InputText_index.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.createElement("div", { className: styles.searchButton },
            React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.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, design.tokens["timing-quick"]);
        }
    }
}

exports.DATA_LIST_SEARCH_TEST_ID = DATA_LIST_SEARCH_TEST_ID;
exports.DataListSearch = DataListSearch;
exports.InternalDataListSearch = InternalDataListSearch;
