/*
 * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Button } from "@base-ui/react/button";
import { Input } from "@base-ui/react/input";
import { Cross, Search } from "@blueprintjs/icons";
import classnames from "classnames";
import { debounce } from "lodash-es";
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import styles from "./ContainsTextInput.module.css";
function ContainsTextInputInner({
  value,
  onChange,
  placeholder = "Search...",
  debounceMs = 300,
  className,
  style,
  renderSearchIcon,
  renderClearIcon
}) {
  const [localValue, setLocalValue] = useState(value ?? "");
  const onChangeRef = useRef(onChange);
  onChangeRef.current = onChange;
  const debouncedOnChange = useMemo(() => debounce(newValue => {
    onChangeRef.current(newValue.length > 0 ? newValue : undefined);
  }, debounceMs), [debounceMs]);
  useEffect(() => {
    return () => {
      debouncedOnChange.cancel();
    };
  }, [debouncedOnChange]);
  useEffect(() => {
    setLocalValue(value ?? "");
    debouncedOnChange.cancel();
  }, [value, debouncedOnChange]);
  const handleInputChange = useCallback(e => {
    setLocalValue(e.target.value);
    debouncedOnChange(e.target.value);
  }, [debouncedOnChange]);
  const handleClear = useCallback(() => {
    setLocalValue("");
    debouncedOnChange.cancel();
    onChangeRef.current(undefined);
  }, [debouncedOnChange]);
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(styles.textInput, className),
    style: style,
    "data-has-value": !!localValue
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.inputGroup
  }, renderSearchIcon ? renderSearchIcon() : /*#__PURE__*/React.createElement("span", {
    className: styles.searchIcon
  }, /*#__PURE__*/React.createElement(Search, null)), /*#__PURE__*/React.createElement(Input, {
    type: "text",
    className: styles.input,
    value: localValue,
    onChange: handleInputChange,
    placeholder: placeholder,
    "aria-label": placeholder
  }), /*#__PURE__*/React.createElement(Button, {
    type: "button",
    className: styles.clearButton,
    "data-active": !!localValue || undefined,
    onClick: handleClear,
    disabled: !localValue,
    "aria-label": "Clear search"
  }, renderClearIcon ? renderClearIcon() : /*#__PURE__*/React.createElement(Cross, null))));
}
export const ContainsTextInput = /*#__PURE__*/memo(ContainsTextInputInner);
//# sourceMappingURL=ContainsTextInput.js.map