import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'dart:js' as js;

import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'provider/location_provider.dart';

class TestFlutterWebMap extends HookConsumerWidget {
  const TestFlutterWebMap({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final location = ref.watch(locationProvider);
    final refreshKey = useState<int>(0);

    useEffect(() {
      void fetchData() {
        final uri = Uri.base;
        final queryParams = uri.queryParameters;

        if (queryParams.isNotEmpty) {
          ref.read(locationProvider.notifier).state = {
            'status': queryParams['status'],
            'message': queryParams['message'],
            'latitude': queryParams['latitude'] != null
                ? double.tryParse(queryParams['latitude']!)
                : null,
            'longitude': queryParams['longitude'] != null
                ? double.tryParse(queryParams['longitude']!)
                : null,
          };
        }

        js.context.callMethod('getLocationAndSend');
      }

      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        fetchData();
      });

      return () {};
    }, [refreshKey.value]);

    void _refreshData() {
      refreshKey.value++; // Trigger useEffect to run again
    }

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Web Google Maps'),
        ),
        body: Column(
          children: [
            SizedBox(height: 20), // Add some spacing
            Text(
                'Latitude: ${location['latitude']?.toString() ?? 'Loading...'}'),
            Text(
                'Longitude: ${location['longitude']?.toString() ?? 'Loading...'}'),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _refreshData,
          child: Icon(Icons.refresh),
          tooltip: 'Refresh Location',
        ),
      ),
    );
  }
}