frontend/src/components/common/SearchBar.tsx

/**
 * SearchBar 搜索栏组件
 * 用于搜索内容
 */

import React, { useMemo, useState } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';

interface SearchBarProps {
  value: string;
  onChangeText: (text: string) => void;
  onSubmit: () => void;
  placeholder?: string;
  onFocus?: () => void;
  onBlur?: () => void;
  autoFocus?: boolean;
}

function createSearchBarStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.background.paper,
      borderRadius: borderRadius.full,
      paddingHorizontal: spacing.xs,
      height: 46,
      borderWidth: 1,
      borderColor: colors.divider,
      shadowColor: 'transparent',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0,
      shadowRadius: 0,
      elevation: 0,
    },
    containerFocused: {
      borderColor: colors.primary.main,
      shadowColor: 'transparent',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0,
      shadowRadius: 0,
      elevation: 0,
    },
    searchIconWrap: {
      width: 30,
      height: 30,
      marginLeft: spacing.xs,
      marginRight: spacing.xs,
      borderRadius: borderRadius.full,
      backgroundColor: `${colors.text.secondary}12`,
      alignItems: 'center',
      justifyContent: 'center',
    },
    searchIconWrapFocused: {
      backgroundColor: `${colors.primary.main}1A`,
    },
    input: {
      flex: 1,
      fontSize: fontSizes.md,
      color: colors.text.primary,
      paddingVertical: spacing.sm + 1,
      paddingHorizontal: spacing.xs,
    },
    clearButton: {
      width: 24,
      height: 24,
      marginHorizontal: spacing.xs,
      borderRadius: borderRadius.full,
      backgroundColor: `${colors.text.secondary}14`,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
}

const SearchBar: React.FC<SearchBarProps> = ({
  value,
  onChangeText,
  onSubmit,
  placeholder = '搜索...',
  onFocus,
  onBlur,
  autoFocus = false,
}) => {
  const colors = useAppColors();
  const styles = useMemo(() => createSearchBarStyles(colors), [colors]);
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
    onFocus?.();
  };

  const handleBlur = () => {
    setIsFocused(false);
    onBlur?.();
  };

  return (
    <View style={[styles.container, isFocused && styles.containerFocused]}>
      <View style={[styles.searchIconWrap, isFocused && styles.searchIconWrapFocused]}>
        <MaterialCommunityIcons
          name="magnify"
          size={18}
          color={isFocused ? colors.primary.main : colors.text.secondary}
        />
      </View>
      <TextInput
        style={styles.input}
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        placeholderTextColor={colors.text.hint}
        returnKeyType="search"
        onSubmitEditing={onSubmit}
        onFocus={handleFocus}
        onBlur={handleBlur}
        autoFocus={autoFocus}
        cursorColor={colors.primary.main}
        selectionColor={`${colors.primary.main}40`}
      />
      {value.length > 0 && (
        <TouchableOpacity
          onPress={() => onChangeText('')}
          style={styles.clearButton}
          activeOpacity={0.7}
        >
          <MaterialCommunityIcons name="close" size={14} color={colors.text.secondary} />
        </TouchableOpacity>
      )}
    </View>
  );
};

export default SearchBar;