import ReactModal from 'react-native-modal';
import { ScrollView, Text, TouchableOpacity, View, Image } from 'react-native';
import { styles } from './styles';
import { API_HOST } from 'src/constants';

const MegaregionsModal = ({
  isVisible,
  onClose,
  onSelect,
  data,
  isCountry = false
}: {
  isVisible: boolean;
  onClose: () => void;
  onSelect: (object: { id: number; name: string }) => void;
  data: { id: number; name: string; flag?: string }[];
  isCountry?: boolean;
}) => {
  return (
    <ReactModal
      isVisible={isVisible}
      onBackdropPress={onClose}
      style={styles.modal}
      statusBarTranslucent={true}
      presentationStyle="overFullScreen"
    >
      <View style={styles.wrapper}>
        <ScrollView style={{ paddingBottom: 16 }} showsVerticalScrollIndicator={false}>
          {data?.map((item) => (
            <TouchableOpacity key={item.id} style={styles.btnOption} onPress={() => onSelect(item)}>
              {isCountry && item.flag ? (
                <Image source={{ uri: `${API_HOST}${item.flag}` }} style={styles.flag} />
              ) : null}
              <Text style={styles.btnOptionText}>{item.name}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
    </ReactModal>
  );
};

export default MegaregionsModal;
