'use strict';

var React = require('react');
var classnames = require('classnames');
var framerMotion = require('framer-motion');
var design = require('@jobber/design');
var jobberHooks = require('@jobber/hooks');
var InputText = require('./InputText-cjs.js');
var DataListContext = require('./DataListContext-cjs.js');
var DataList_const = require('./DataList.const-cjs.js');
var Button = require('./Button-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";
const SWAP_DURATION = 0.1;
const SLIDE_IN_DOWN = {
    visible: { y: 0, opacity: 1 },
    hidden: { y: "-10%", opacity: 0 },
};
const SLIDE_IN_UP = {
    visible: { y: 0, opacity: 1 },
    hidden: { y: "10%", opacity: 0 },
};
// Match the wrapper's display to its child so the animation wrapper does not
// shift surrounding inline layout.
function applyChildDisplay(node) {
    if (node === null || node === void 0 ? void 0 : node.firstElementChild) {
        node.style.display = window.getComputedStyle(node.firstElementChild).display;
    }
}
// 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 [internalValue, setInternalValue] = React.useState("");
    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;
    const isControlled = controlledValue !== undefined;
    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.InputText
            // If the initial value changes, reset the input.
            , { 
                // If the initial value changes, reset the input.
                key: initialValue, value: isControlled ? controlledValue : internalValue, ref: inputRef, placeholder: getPlaceholder(), onChange: isControlled
                    ? (val) => searchComponent.props.onSearch(val)
                    : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
        React.createElement("div", { className: styles.searchButton },
            React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
                React.createElement(framerMotion.motion.div, { ref: applyChildDisplay, key: visible ? "close" : "search", variants: visible ? SLIDE_IN_UP : SLIDE_IN_DOWN, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: SWAP_DURATION } }, visible ? (React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch })) : (React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", 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(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, design.tokens["timing-quick"]);
        }
    }
    function handleUncontrolledChange(val) {
        setInternalValue(val);
        debouncedSearch(val);
    }
}

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