pogdark-app/components/Location.tsx

import React, { useState } from "react";
import { Dialog, TextInput, useTheme, Button, Text } from "react-native-paper";
import { View } from "react-native";
import Slider from "@react-native-community/slider";
import axios from "axios";
import * as Location from "expo-location";
import log from "@/util/log"

export const API_URL = process.env.EXPO_PUBLIC_API_URL;
const BUTTON_WIDTH = 260;

const LocationComponent = () => {
    const theme = useTheme();
    const [zip, setZip] = useState("");
    const [distance, setDistance] = useState(25); // <-- slider value
    const [loading, setLoading] = useState(false);
    const [locLoading, setLocLoading] = useState(false);

    // Call the parks endpoint with coordinates
    const fetchNearbyParks = async (longitude: number, latitude: number) => {
        try {
            const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": distance });
            log.error("Nearby Parks:", response.data); // handle parks as you need
        } catch (err) {
            log.error("Nearby Parks Error:", err);
        }
    };

    // Zip code handler
    const handleSubmit = async () => {
        if (!zip) return;
        setLoading(true);
        try {
            const response = await axios.post(API_URL + "/zipLookup", { zip });
            log.error("Zip Lookup Response:", response.data);
            const longitude = response.data[0];
            const latitude = response.data[1];
            await fetchNearbyParks(longitude, latitude);
        } catch (err) {
            log.error(err);
        }
        setLoading(false);
    };

    // Geolocation handler
    const handleGetLocation = async () => {
        setLocLoading(true);
        try {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                log.error("Permission to access location was denied");
                setLocLoading(false);
                return;
            }
            let location = await Location.getCurrentPositionAsync({});
            const { longitude, latitude } = location.coords;
            log.error([longitude, latitude]);
            await fetchNearbyParks(longitude, latitude);
        } catch (err) {
            log.error("Location Error:", err);
        }
        setLocLoading(false);
    };

    return (
        <Dialog.Content style={{ maxHeight: 400, justifyContent: "center", alignItems: "center" }}>
            <View style={{ alignItems: "center", width: "100%" }}>
                <Button
                    mode="outlined"
                    onPress={handleGetLocation}
                    loading={locLoading}
                    disabled={locLoading}
                    style={{ marginBottom: 12, width: BUTTON_WIDTH }}
                >
                    Use My Location
                </Button>
                <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
                <View
                    style={{
                        flexDirection: "row",
                        alignItems: "center",
                        width: BUTTON_WIDTH,
                        justifyContent: "center",
                        marginBottom: 4,
                    }}
                >
                    <TextInput
                        label="Enter Zip Code"
                        mode="outlined"
                        value={zip}
                        onChangeText={setZip}
                        style={{
                            flex: 3,
                            marginRight: 6,
                            fontFamily: "SpaceReg",
                            minWidth: 0,
                        }}
                        placeholderTextColor={theme.colors.primary}
                        textColor={theme.colors.primary}
                        theme={{ colors: { text: theme.colors.primary } }}
                    />
                    <Button
                        mode="contained"
                        onPress={handleSubmit}
                        loading={loading}
                        disabled={!zip || loading}
                        style={{
                            flex: 2,
                            minWidth: 0,
                            height: 50,
                        }}
                        contentStyle={{ height: 50 }}
                    >
                        Submit
                    </Button>
                </View>
                {/* Distance Slider */}
                <View style={{ width: BUTTON_WIDTH, marginTop: 10, alignItems: "center" }}>
                    <Text style={{ color: theme.colors.primary, marginBottom: 2 }}>
                        Distance: {distance} mile{distance !== 1 ? "s" : ""}
                    </Text>
                    <Slider
                        style={{ width: "100%", height: 36 }}
                        minimumValue={1}
                        maximumValue={40}
                        step={1}
                        value={distance}
                        onValueChange={setDistance}
                        minimumTrackTintColor={theme.colors.primary}
                        maximumTrackTintColor={theme.colors.onSurfaceDisabled || "#ccc"}
                        thumbTintColor={theme.colors.primary}
                    />
                </View>
            </View>
        </Dialog.Content>
    );
};

export default LocationComponent;