import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import MapView, { Marker } from "react-native-maps";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";

// Koordinat awal Nganjuk (misal: Alun-Alun Nganjuk)
const initialRegion = {
  latitude: -7.6079,
  longitude: 111.903,
  latitudeDelta: 0.05,
  longitudeDelta: 0.05,
};

// Contoh lokasi TPS di Nganjuk
const locations = [
  { id: 1, name: "TPS Alun-Alun", latitude: -7.6085, longitude: 111.9012 },
  {
    id: 2,
    name: "TPS Jl. Gatot Subroto",
    latitude: -7.6102,
    longitude: 111.9051,
  },
  { id: 3, name: "TPS Pasar Wage", latitude: -7.6055, longitude: 111.9083 },
];

const LokasiTerdekat = () => {
  const navigation = useNavigation();
  const [region, setRegion] = useState(initialRegion);

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.navigate("Home")}
        >
          <Ionicons name="arrow-back" size={28} color="#000" />
        </TouchableOpacity>
        <Text style={styles.title}>LOKASI TERDEKAT</Text>
        <View style={{ width: 28 }} /> {/* Spacer untuk keseimbangan header */}
      </View>

      {/* MapView */}
      <MapView
        style={styles.map}
        region={region}
        onRegionChangeComplete={(newRegion) => setRegion(newRegion)}
      >
        {locations.map((location) => (
          <Marker
            key={location.id}
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
            title={location.name}
            description={`Lat: ${location.latitude}, Lng: ${location.longitude}`}
          />
        ))}
      </MapView>

      {/* Deskripsi */}
      <Text style={styles.description}>
        Menampilkan lokasi TPS terdekat di wilayah Nganjuk.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: 40,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    marginBottom: 10,
  },
  backButton: {
    padding: 8,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    textAlign: "left",
    marginRight: 160,
  },
  map: {
    width: Dimensions.get("window").width,
    height: 800,
    // width: 500,
  },
  description: {
    fontSize: 16,
    color: "#555",
    marginTop: 16,
    textAlign: "center",
    paddingHorizontal: 16,
  },
});

export default LokasiTerdekat;