import React, {useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  Image,
  ScrollView,
} from 'react-native';
import R from '../../assets/R';
const Dropdown = ({items, placeholder = 'Chọn...', onSelect}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState(null);

  const handleSelect = item => {
    setSelected(item);
    setIsOpen(false);
    if (onSelect) onSelect(item);
  };

  return (
    <View style={styles.container}>
      {/* Nút hiển thị */}
      <TouchableOpacity
        style={styles.dropdownHeader}
        onPress={() => setIsOpen(!isOpen)}>
        <Text style={styles.dropdownHeaderText}>
          {selected ? selected.label : placeholder}
        </Text>
        <Image source={R.images.icDrop} style={styles.imageIcon} />
      </TouchableOpacity>

      {/* Danh sách xổ xuống */}
      {isOpen && (
        <View
          style={[
            styles.dropdownList,
            {position: 'absolute', top: 35, left: 0, right: 0, zIndex: 999},
          ]}>
          {/* <FlatList
          nestedScrollEnabled={true}
            data={items}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={styles.dropdownItem}
                onPress={() => handleSelect(item)}
              >
                <Text style={styles.dropdownItemText}>{item.label}</Text>
              </TouchableOpacity>
            )}
          /> */}
          <ScrollView style={{maxHeight: 200}}>
            {items.map(item => (
              <TouchableOpacity
                key={item.id.toString()}
                style={styles.dropdownItem}
                onPress={() => handleSelect(item)}>
                <Text style={styles.dropdownItemText}>{item.label}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      )}
    </View>
  );
};

export default Dropdown;

const styles = StyleSheet.create({
  container: {
    width: '100%',
  },
  dropdownHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: R.colors.grayBorderInputTextHeader,
    borderRadius: 5,
    backgroundColor: '#fff',
    height: 35,
    paddingHorizontal: 15,
  },
  dropdownHeaderText: {
    fontSize: 12,
    color: '#333',
  },
  dropdownList: {
    borderWidth: 1,
    borderColor: '#ccc',
    backgroundColor: '#fff',
  },
  dropdownItem: {
    padding: 5,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  dropdownItemText: {
    fontSize: 12,
    color: '#333',
  },
  imageIcon: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
    tintColor: '#333',
  },
});
