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

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

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

const SearchBar: React.FC<SearchBarProps> = ({
  value,
  onChangeText,
  onSubmit,
  placeholder = '搜索...',
  onFocus,
  onBlur,
  autoFocus = false,
}) => {
  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}
      />
      {value.length > 0 && (
        <TouchableOpacity
          onPress={() => onChangeText('')}
          style={styles.clearButton}
          activeOpacity={0.7}
        >
          <MaterialCommunityIcons
            name="close"
            size={14}
            color={colors.text.secondary}
          />
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.background.paper,
    borderRadius: borderRadius.full,
    paddingHorizontal: spacing.xs,
    height: 46,
    borderWidth: 1,
    borderColor: '#E7E7E7',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.09,
    shadowRadius: 6,
    elevation: 2,
  },
  containerFocused: {
    borderColor: `${colors.primary.main}66`,
    shadowColor: colors.primary.main,
    shadowOpacity: 0.18,
    shadowRadius: 10,
    elevation: 4,
  },
  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',
  },
});

export default SearchBar;
