import gradio as gr

def display_location(location_json):
    return location_json

with gr.Blocks() as demo:
    gr.Markdown("## GPS Location Fetcher")
    location_data = gr.JSON(label="Your Location Data")
    hidden_input = gr.Textbox(visible=False, elem_id="textbox_id")

    # JavaScript code to get location and update hidden_input
    js_code = """
    function() {
        var textbox = document.querySelector('#textbox_id textarea');
        console.log(textbox)
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    var data = {
                        'latitude': position.coords.latitude,
                        'longitude': position.coords.longitude,
                        'accuracy': position.coords.accuracy
                    };
                    console.log("Geolocation data:", data);
                    textbox.value = JSON.stringify(data);
                    textbox.dispatchEvent(new Event('input', { bubbles: true }));
                },
                function(error) {
                    var data = {'error': error.message};
                    console.log("Geolocation error:", data);
                    textbox.value = JSON.stringify(data);
                    textbox.dispatchEvent(new Event('input', { bubbles: true }));
                }
            );
        } else {
            var data = {'error': 'Geolocation is not supported by this browser.'};
            console.log("Geolocation unsupported:", data);
            textbox.value = JSON.stringify(data);
            textbox.dispatchEvent(new Event('input', { bubbles: true }));
        }
    }
    """

    btn = gr.Button("Get Location")
    btn.click(None, [], [], js=js_code)
    hidden_input.change(display_location, inputs=hidden_input, outputs=location_data)


demo.launch(server_name="0.0.0.0")