Untitled

import React, { useState } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  TouchableOpacity, 
  Modal, 
  ScrollView, 
  TextInput,
  FlatList 
} from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';

const commonAllergies = [
  'Fıstık', 'Gluten', 'Süt', 'Yumurta', 'Soya', 
  'Kabuklu Deniz Ürünleri', 'Susam', 'Fındık', 
  'Ceviz', 'Keten Tohumu', 'Hardal', 'Çavdar',
  'Sülfit', 'Kereviz', 'Badem', 'Kivi'
];

const AllergiesButton = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [userAllergies, setUserAllergies] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [customAllergy, setCustomAllergy] = useState('');

  const toggleAllergy = (allergy) => {
    if (userAllergies.includes(allergy)) {
      setUserAllergies(userAllergies.filter(item => item !== allergy));
    } else {
      setUserAllergies([...userAllergies, allergy]);
    }
  };

  const addCustomAllergy = () => {
    if (customAllergy.trim() !== '' && !userAllergies.includes(customAllergy.trim())) {
      setUserAllergies([...userAllergies, customAllergy.trim()]);
      setCustomAllergy('');
    }
  };

  const removeAllergy = (allergy) => {
    setUserAllergies(userAllergies.filter(item => item !== allergy));
  };

  const filteredAllergies = commonAllergies.filter(
    allergy => allergy.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <View style={styles.container}>
      {/* Ana Profil Butonu */}
      <TouchableOpacity 
        style={styles.allergyButton}
        onPress={() => setModalVisible(true)}
      >
        <MaterialIcons name="warning" size={24} color="#E74C3C" />
        <Text style={styles.buttonText}>Alerjilerim</Text>
        <View style={styles.countContainer}>
          <Text style={styles.countText}>{userAllergies.length}</Text>
        </View>
        <MaterialIcons name="chevron-right" size={24} color="#888" />
      </TouchableOpacity>

      {/* Alerjiler Modalı */}
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>Alerjilerim</Text>
              <TouchableOpacity onPress={() => setModalVisible(false)}>
                <MaterialIcons name="close" size={24} color="#333" />
              </TouchableOpacity>
            </View>

            {/* Kayıtlı Alerjiler */}
            {userAllergies.length > 0 ? (
              <View style={styles.selectedAllergiesContainer}>
                <Text style={styles.sectionTitle}>Kayıtlı Alerjilerim</Text>
                <View style={styles.allergiesTags}>
                  {userAllergies.map((allergy, index) => (
                    <View key={index} style={styles.allergyTag}>
                      <Text style={styles.allergyTagText}>{allergy}</Text>
                      <TouchableOpacity onPress={() => removeAllergy(allergy)}>
                        <MaterialIcons name="close" size={16} color="white" />
                      </TouchableOpacity>
                    </View>
                  ))}
                </View>
              </View>
            ) : (
              <View style={styles.emptyState}>
                <MaterialIcons name="info-outline" size={40} color="#ccc" />
                <Text style={styles.emptyText}>Henüz alerji kaydetmediniz</Text>
                <Text style={styles.emptySubText}>Aşağıdan alerji ekleyebilirsiniz</Text>
              </View>
            )}

            {/* Arama Kutusu */}
            <TextInput
              style={styles.searchInput}
              placeholder="Alerji ara..."
              value={searchQuery}
              onChangeText={setSearchQuery}
            />

            {/* Özel Alerji Ekleme */}
            <View style={styles.customAllergyContainer}>
              <TextInput
                style={styles.customAllergyInput}
                placeholder="Özel alerji ekle..."
                value={customAllergy}
                onChangeText={setCustomAllergy}
              />
              <TouchableOpacity 
                style={styles.addButton} 
                onPress={addCustomAllergy}
                disabled={customAllergy.trim() === ''}
              >
                <Text style={styles.addButtonText}>Ekle</Text>
              </TouchableOpacity>
            </View>

            {/* Yaygın Alerjiler Listesi */}
            <Text style={styles.sectionTitle}>Yaygın Alerjiler</Text>
            <ScrollView style={styles.allergyList}>
              {filteredAllergies.map((allergy, index) => (
                <TouchableOpacity 
                  key={index} 
                  style={[
                    styles.allergyItem,
                    userAllergies.includes(allergy) && styles.selectedAllergyItem
                  ]}
                  onPress={() => toggleAllergy(allergy)}
                >
                  <Text 
                    style={[
                      styles.allergyItemText,
                      userAllergies.includes(allergy) && styles.selectedAllergyText
                    ]}
                  >
                    {allergy}
                  </Text>
                  {userAllergies.includes(allergy) && (
                    <MaterialIcons name="check" size={20} color="#4A90E2" />
                  )}
                </TouchableOpacity>
              ))}
            </ScrollView>

            {/* Kaydet Butonu */}
            <TouchableOpacity 
              style={styles.saveButton}
              onPress={() => {
                // Burada alerjileri kaydetme işleminizi gerçekleştirin
                // örn: saveAllergies(userAllergies);
                setModalVisible(false);
              }}
            >
              <Text style={styles.saveButtonText}>Kaydet</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  allergyButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: '500',
    marginLeft: 12,
    flex: 1,
  },
  countContainer: {
    backgroundColor: '#4A90E2',
    borderRadius: 15,
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10,
  },
  countText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 14,
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalContent: {
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingHorizontal: 20,
    paddingBottom: 30,
    paddingTop: 15,
    height: '80%',
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  searchInput: {
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    padding: 12,
    marginVertical: 10,
  },
  allergyList: {
    maxHeight: 300,
  },
  allergyItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  selectedAllergyItem: {
    backgroundColor: '#f0f8ff',
  },
  allergyItemText: {
    fontSize: 16,
  },
  selectedAllergyText: {
    fontWeight: '500',
    color: '#4A90E2',
  },
  saveButton: {
    backgroundColor: '#4A90E2',
    borderRadius: 10,
    padding: 15,
    alignItems: 'center',
    marginTop: 20,
  },
  saveButtonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16,
  },
  selectedAllergiesContainer: {
    marginVertical: 10,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginVertical: 5,
  },
  allergiesTags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 5,
  },
  allergyTag: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#4A90E2',
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 20,
    margin: 5,
  },
  allergyTagText: {
    color: 'white',
    marginRight: 5,
  },
  emptyState: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
    marginVertical: 10,
  },
  emptyText: {
    fontSize: 16,
    fontWeight: '500',
    marginTop: 10,
    color: '#555',
  },
  emptySubText: {
    fontSize: 14,
    color: '#888',
    marginTop: 5,
  },
  customAllergyContainer: {
    flexDirection: 'row',
    marginVertical: 10,
  },
  customAllergyInput: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    padding: 12,
    marginRight: 10,
  },
  addButton: {
    backgroundColor: '#50C878',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 15,
  },
  addButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default AllergiesButton;