import React, { useState } from "react";
import { Dialog, TextInput, useTheme, Button } from "react-native-paper";
import { View } from "react-native";
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 LocationComponent = () => {
    const theme = useTheme();
    const [zip, setZip] = useState("");
    const [loading, setLoading] = useState(false);
    const [locLoading, setLocLoading] = useState(false);

    // Handle submit by zip
    const handleSubmit = async () => {
        if (!zip) return;
        setLoading(true);
        try {
            const response = await axios.post(API_URL + "/zipLookup", { zip });
            log.error(response.data);
            const long = response.data[0];
            const lat = response.data[1];
            // Do something with long/lat as needed
        } catch (err) {
            log.error(err);
        }
        setLoading(false);
    };

    // Handle device geolocation
    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]);
            // Do something with longitude/latitude as needed
        } catch (err) {
            log.error("Location Error:", err);
        }
        setLocLoading(false);
    };

    return (
        <Dialog.Content style={{ maxHeight: 300 }}>
            <View style={{ flexDirection: "row", alignItems: "center", padding: 16 }}>
                <TextInput
                    label="Enter Zip Code"
                    mode="outlined"
                    value={zip}
                    onChangeText={setZip}
                    style={{ flex: 1, marginRight: 10, fontFamily: "SpaceReg" }}
                    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={{ marginRight: 6 }}
                >
                    Submit
                </Button>
                <Button
                    mode="outlined"
                    onPress={handleGetLocation}
                    loading={locLoading}
                    disabled={locLoading}
                >
                    Use My Location
                </Button>
            </View>
        </Dialog.Content>
    );
};

export default LocationComponent;
