Untitled

import React, { useState, useRef } from 'react';
import { StyleSheet, View, Text, Dimensions, Alert, TouchableOpacity } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import { Picker } from '@react-native-picker/picker';

type City = {
  name: string;
  latitude: number;
  longitude: number;
  population: string;
}

const cities: City[] = [
  { name: 'Moscow', latitude: 55.7558, longitude: 37.6173, population: '12.5 million' },
  { name: 'Saint-Petersburg', latitude: 59.9343, longitude: 30.3351, population: '5.4 million' },
  { name: 'Sochi', latitude: 43.6028, longitude: 39.7342, population: '364,171' },
  { name: 'Ivanovo', latitude: 57.0054, longitude: 41.0089,population: '408,330'   },
  { name: 'Irkutsk',  latitude: 52.2864, longitude: 104.3050, population: '620,694'},
];

export default function App() {
  const [selectedCity, setSelectedCity] = useState(cities[0]);
  const [region, setRegion] = useState({
    latitude: 55.7558,
    longitude: 37.6173,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });

  const handleCityChange = (city: City) => {
    setSelectedCity(city);
    setRegion({...region, latitude: city.latitude, longitude: city.longitude})
    if (city.name === "Ivanovo" || city.name === "Irkutsk"){
      alert(`${city.name}: population ${city.population}`);
    }
  };

  const handleMarkerPress = () => {
    alert(`${selectedCity.name}: population ${selectedCity.population}`);
  };

  const handleZoomIn = () => {
    const { latitudeDelta, longitudeDelta } = region;
    setRegion({
      ...region,
      latitudeDelta: latitudeDelta * 0.5,
      longitudeDelta: longitudeDelta * 0.5,
    });
  };
  
  const handleZoomOut = () => {
    const { latitudeDelta, longitudeDelta } = region;
    setRegion({
      ...region,
      latitudeDelta: latitudeDelta * 2,
      longitudeDelta: longitudeDelta * 2,
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Map Demo Page</Text>
        <Picker
          selectedValue={selectedCity}
          style={{ height: 50, width: 150 }}
          onValueChange={handleCityChange}
        >
          {cities.map((city, index) => (
            <Picker.Item key={index} label={city.name} value={city} />
          ))}
        </Picker>
      </View>
      <MapView
        style={styles.map}
        region={region}
      >
        <Marker
          coordinate={{ latitude: selectedCity.latitude, longitude: selectedCity.longitude }}
          onPress={handleMarkerPress}
        />
      </MapView>
      <View style={styles.buttonContainer}>
      <TouchableOpacity style={styles.button} onPress={handleZoomIn}>
          <Text>+</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={handleZoomOut}>
          <Text>-</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.footer}>
        <Text style={styles.footerText}>Давыдов Давид Робертович ИУ3-81Б: davydov.dr@do-student.ru</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  map: {
    flex: 1,
  },
  buttonContainer: {
    position: 'absolute',
    bottom: 60,
    right: 20,
    flexDirection: 'column',
    alignItems: 'center',
  },
  button: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 10,
  },
  buttonText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  footer: {
    backgroundColor: 'white',
    padding: 10,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  footerText: {
    fontSize: 16,
    color: 'black',
  },
});