import React, {useCallback, useRef} from 'react';
import {
  TextInput,
  TextInputProps,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import CustomizedTextInput from '@components/CustomizedTextInput';
import Icon from '@components/Icon';
import {COLORS} from '@shared/colors';

import {SEARCH_MAX_LENGTH} from './constants';
import {styles} from './styles';

interface Props {
  editable?: boolean;
  onChange?: (value: string) => void;
  value?: string;
  withClose?: boolean;
  style?: ViewStyle;
  placeholder?: string;
  closeTestID?: string;
  pointerEvents?: TextInputProps['pointerEvents'];
}

/**
 * @deprecated Use `_HuGo/Inputs/InputSearch` instead
 */
function SearchInput({
  onChange,
  placeholder,
  value,
  style,
  withClose,
  closeTestID,
  pointerEvents,
  editable = true,
}: Props) {
  const inputRef = useRef<TextInput>(null);
  const onClearInput = useCallback(() => {
    onChange?.('');
    inputRef.current?.blur();
  }, [onChange]);

  return (
    <View style={[styles.button, style]}>
      <Icon
        name="search"
        color={COLORS.GRAY_THIRTY_THREE}
        size="md"
        style={styles.icon}
      />
      <CustomizedTextInput
        editable={editable}
        ref={inputRef}
        onChangeText={onChange}
        value={value}
        placeholder={placeholder}
        noBorder
        style={[styles.textInput, withClose && styles.withClose]}
        returnKeyType="search"
        maxLength={SEARCH_MAX_LENGTH}
        showMaxLength={false}
        pointerEvents={pointerEvents}
      />
      {withClose && (
        <TouchableOpacity onPress={onClearInput} testID={closeTestID}>
          <Icon name="close" size="sm" color={COLORS.DARK_GRAY} />
        </TouchableOpacity>
      )}
    </View>
  );
}

export default SearchInput;