import { showToastError } from "@/config";
import { fetchGpsData } from "@/controller/DeviceController";
import { useState } from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

import MapView, { Marker } from "react-native-maps";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function HomeScreen() {
  const [gpsData, setGpsData] = useState<Model.GPSResonse | null>(null);

  // useEffect(() => {
  //   getGpsData();
  // }, []);

  const getGpsData = async () => {
    try {
      const response = await fetchGpsData();
      console.log("GpsData: ", response.data);

      setGpsData(response.data);
    } catch (error) {
      showToastError("Lỗi", "Không thể lấy dữ liệu GPS");
    }
  };

  return (
    <SafeAreaProvider style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 15.70581,
          longitude: 116.152685,
          latitudeDelta: 2,
          longitudeDelta: 2,
        }}
        mapType="none"
      >
        {gpsData && (
          <Marker
            coordinate={{
              latitude: gpsData.lat,
              longitude: gpsData.lon,
            }}
            title="Device Location"
            description={`Lat: ${gpsData.lat}, Lon: ${gpsData.lon}`}
          />
        )}
      </MapView>
      <TouchableOpacity style={styles.button} onPress={getGpsData}>
        <Text style={styles.buttonText}>Get GPS Data</Text>
      </TouchableOpacity>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  button: {
    position: "absolute",
    top: 50,
    right: 20,
    backgroundColor: "#007AFF",
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    elevation: 5,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
  titleContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: "absolute",
  },
});