import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:latlong2/latlong.dart';
import 'package:rogapp/provider/map_state_provider.dart';
import 'package:rogapp/widgets/base_layer_widget.dart';

class HomePage extends ConsumerStatefulWidget {
  const HomePage({super.key});

  @override
  ConsumerState<HomePage> createState() => _HomePageState();
}

class _HomePageState extends ConsumerState<HomePage> {
  StreamSubscription? subscription;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final mapStateInstance = ref.watch(mapStateNotifierProvider);
    return Scaffold(
      //drawer: DrawerPage(),
      appBar: AppBar(
        title: const Text("Rogaining"),
        actions: [
          IconButton(
              onPressed: () {
                //Get.toNamed(AppPages.HISTORY);
              },
              icon: const Icon(Icons.history)),
          IconButton(
              onPressed: () {
                // final tk = indexController.currentUser[0]["token"];
                // if (tk != null) {
                //   destinationController.fixMapBound(tk);
                // }
              },
              icon: const Icon(Icons.refresh)),
          InkWell(
            onTap: () {
              //Get.toNamed(AppPages.SEARCH);
            },
            child: Container(
              height: 32,
              width: 75,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(25),
              ),
              child: const Center(
                child: Icon(Icons.search),
              ),
            ),
          ),
          //CatWidget(indexController: indexController,),
        ],
      ),
      body: Center(
        child: FlutterMap(
          mapController: mapStateInstance.mapController,
          options: MapOptions(
            maxZoom: 18.4,
            onMapReady: () {
              // indexController.is_mapController_loaded.value = true;
              subscription = mapStateInstance.mapController?.mapEventStream
                  .listen((MapEvent mapEvent) {
                if (mapEvent is MapEventMoveStart) {
                  //print(DateTime.now().toString() + ' [MapEventMoveStart] START');
                  // do something
                }
                //   if (mapEvent is MapEventMoveEnd &&
                //       indexController.currentUser.isEmpty) {
                //print(DateTime.now().toString() + ' [MapEventMoveStart] END');
                //     indexController.loadLocationsBound();
                //indexController.rogMapController!.move(c.center, c.zoom);
                //   }
              });
            },
            center: LatLng(37.15319600454702, 139.58765950528198),
            //bounds:
            zoom: 18,
            interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag,

            onPositionChanged: (MapPosition pos, isvalue) {
              //indexController.currentBound = [pos.bounds!];
            },
            // onTap: (_, __) => popupController
            //     .hideAllPopups(), // Hide popup when the map is tapped.
          ),
          children: [
            const BaseLayer(),
            CurrentLocationLayer(
              followOnLocationUpdate: FollowOnLocationUpdate.once,
              turnOnHeadingUpdate: TurnOnHeadingUpdate.never,
              style: const LocationMarkerStyle(
                marker: DefaultLocationMarker(
                  child: Icon(
                    Icons.navigation,
                    color: Colors.yellowAccent,
                  ),
                ),
                markerSize: Size(27, 27),
                markerDirection: MarkerDirection.heading,
              ),
            ),
            const MarkerLayer(markers: [])
          ],
        ),
      ),
    );
  }
}