"use strict";

import { forwardRef } from 'react';
import { Platform, View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { atoms as a } from "../styles/index.js";
import { Button } from "../button/index.js";
import * as TextField from "../text-field/index.js";
import { MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon } from "../icons/MagnifyingGlass.js";
import { TimesLarge_Stroke2_Corner0_Rounded as X } from "../icons/Times.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
  value,
  label = 'Search',
  onClearText,
  ...rest
}, ref) {
  const theme = useTheme();
  const showClear = value != null && value.length > 0;
  return /*#__PURE__*/_jsxs(View, {
    style: [a.w_full, a.relative],
    children: [/*#__PURE__*/_jsxs(TextField.Root, {
      children: [/*#__PURE__*/_jsx(TextField.Icon, {
        icon: MagnifyingGlassIcon
      }), /*#__PURE__*/_jsx(TextField.Input, {
        inputRef: ref,
        label: label,
        value: value,
        placeholder: label,
        returnKeyType: "search",
        keyboardAppearance: theme.mode === 'light' ? 'light' : 'dark',
        selectTextOnFocus: Platform.OS !== 'web',
        autoFocus: false,
        accessibilityRole: "search",
        autoCorrect: false,
        autoComplete: "off",
        autoCapitalize: "none",
        style: showClear ? {
          paddingRight: 24
        } : undefined,
        ...rest
      })]
    }), showClear && /*#__PURE__*/_jsx(View, {
      style: [a.absolute, a.z_20, a.my_auto, a.inset_0, a.justify_center, a.pr_sm, {
        left: 'auto'
      }],
      children: /*#__PURE__*/_jsx(Button, {
        testID: "searchTextInputClearBtn",
        onPress: onClearText,
        accessibilityLabel: "Clear search query",
        hitSlop: {
          top: 10,
          bottom: 10,
          left: 10,
          right: 10
        },
        variant: "ghost",
        size: "small",
        icon: /*#__PURE__*/_jsx(X, {
          fill: theme.colors.textSecondary,
          size: "xs"
        }),
        style: {
          padding: 4,
          minHeight: 0
        }
      })
    })]
  });
});
SearchInput.displayName = 'SearchInput';
//# sourceMappingURL=index.js.map