/*
 * File: SearchBar.tsx
 * Description: Search bar component for patient filtering
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { theme } from '../../../theme/theme';
import Icon from 'react-native-vector-icons/Feather';

// ============================================================================
// INTERFACES
// ============================================================================

interface SearchBarProps {
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  showFilter?: boolean;
  onFilterPress?: () => void;
}

// ============================================================================
// SEARCH BAR COMPONENT
// ============================================================================

/**
 * SearchBar Component
 * 
 * Purpose: Provide search functionality for patient list
 * 
 * Features:
 * - Real-time search input
 * - Clear button when text is present
 * - Optional filter button
 * - Modern design with icons
 * - Optimized for medical data search
 */
const SearchBar: React.FC<SearchBarProps> = ({
  value,
  onChangeText,
  placeholder = 'Search patients...',
  showFilter = false,
  onFilterPress,
}) => {
  // ============================================================================
  // EVENT HANDLERS
  // ============================================================================

  /**
   * Handle Clear Search
   * 
   * Purpose: Clear the search input
   */
  const handleClear = () => {
    onChangeText('');
  };

  // ============================================================================
  // MAIN RENDER
  // ============================================================================

  return (
    <View style={styles.container}>
      <View style={styles.searchContainer}>
        {/* Search Icon */}
        <Icon 
          name="search" 
          size={18} 
          color={theme.colors.textMuted} 
          style={styles.searchIcon}
        />
        
        {/* Search Input */}
        <TextInput
          style={styles.searchInput}
          value={value}
          onChangeText={onChangeText}
          placeholder={placeholder}
          placeholderTextColor={theme.colors.textMuted}
          returnKeyType="search"
          autoCorrect={false}
          autoCapitalize="none"
        />
        
        {/* Clear Button */}
        {value.length > 0 && (
          <TouchableOpacity
            style={styles.clearButton}
            onPress={handleClear}
            activeOpacity={0.7}
          >
            <Icon 
              name="x-circle" 
              size={18} 
              color={theme.colors.textMuted} 
            />
          </TouchableOpacity>
        )}
      </View>
      
      {/* Filter Button */}
      {showFilter && (
        <TouchableOpacity
          style={styles.filterButton}
          onPress={onFilterPress}
          activeOpacity={0.7}
        >
          <Icon 
            name="sliders" 
            size={18} 
            color={theme.colors.primary} 
          />
        </TouchableOpacity>
      )}
    </View>
  );
};

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: theme.spacing.sm,
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: theme.colors.backgroundAlt,
    borderRadius: 12,
    paddingHorizontal: theme.spacing.sm,
    paddingVertical: theme.spacing.xs,
    borderWidth: 1,
    borderColor: theme.colors.border,
  },
  searchIcon: {
    marginRight: theme.spacing.xs,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.primary,
    paddingVertical: theme.spacing.xs,
  },
  clearButton: {
    padding: theme.spacing.xs,
    marginLeft: theme.spacing.xs,
  },
  filterButton: {
    backgroundColor: theme.colors.backgroundAlt,
    borderRadius: 12,
    padding: theme.spacing.sm,
    marginLeft: theme.spacing.sm,
    borderWidth: 1,
    borderColor: theme.colors.primary,
  },
});

export default SearchBar;

/*
 * End of File: SearchBar.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */