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_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:geojson/geojson.dart';
import 'package:geolocator/geolocator.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_instance/src/extension_instance.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:get/get_state_manager/src/simple/get_view.dart';
import 'package:get/get_utils/src/extensions/internacionalization.dart';
import 'package:latlong2/latlong.dart';
import 'package:rogaining_jp/models/check_points.dart';
import 'package:rogaining_jp/pages/home/home_controller.dart';
import 'package:rogaining_jp/services/rog_event_service.dart';
import 'package:rogaining_jp/utils/util_controller.dart';
import 'package:rogaining_jp/widgets/marker_popup_widget.dart';

class HomePage extends GetView<HomeController> {

  final HomeController homeController = Get.find<HomeController>();

  final MapController mapController = MapController();


  //var markers = <Marker>[].obs;

  Future<void> showCurrentPosition() async {
    LocationPermission permission = await Geolocator.checkPermission();
    if(permission != LocationPermission.whileInUse || permission != LocationPermission.always ){
      permission = await Geolocator.requestPermission();
    }
    Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
    mapController.move(LatLng(position.latitude, position.longitude), 14);
  }


  @override
  Widget build(BuildContext context) {
    final PopupController _popupController = PopupController();
    final UtilController ctrl = Get.find<UtilController>();

    //print("length is " + homeController.RogRoutes[0]!.properties!["name"]);


    return Scaffold(
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                // Update the state of the app.
                // ...
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                // Update the state of the app.
                // ...
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text("app_title".tr),
        actions: [
          IconButton(
            icon: const Icon(Icons.map),
            onPressed: () => {print("action")},
          )

        ],

        // center: LatLng(7.25221960625, 80.7931815538),
        // zoom: 7.0,

      ),
      body: SafeArea(
        child: Obx(() =>
            Stack(
              children: [
                FlutterMap(
                  mapController: mapController,
                  options: MapOptions(
                    onLongPress: (TapPosition, latlong) {
                      CheckPoint i = CheckPoint(
                          entitty: Entity.siteSeen,
                          lat: latlong.latitude,
                          long: latlong.longitude,
                          title: ""
                      );
                      homeController.addCheckPoint(i);
                    },
                    center:  LatLng(36.02496227461018, 139.4499871456401),
                    zoom: 7,
                    maxZoom: 20,
                    plugins: [
                      MarkerClusterPlugin(),
                    ],
                    onTap: (_, __) => _popupController
                        .hideAllPopups(), // Hide popup when the map is tapped.
                  ),
                  children: [
                    TileLayerWidget(
                      options: TileLayerOptions(
                        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        subdomains: ['a', 'b', 'c'],
                      ),
                    ),
                    PolylineLayerWidget(
                      options: PolylineLayerOptions(
                          polylines: homeController.RogRoutes.map((e){
                            return Polyline(
                                points: (e!.geometry as GeoJsonMultiLine).lines.first.geoSerie!.toLatLng(),
                                strokeWidth: 3.0,
                                color: Colors.black
                            );
                          }).toList(),
                      ),
                    ),
                    LocationMarkerLayerWidget(),
                    MarkerClusterLayerWidget(
                      options: MarkerClusterLayerOptions(
                        spiderfyCircleRadius: 80,
                        spiderfySpiralDistanceMultiplier: 2,
                        circleSpiralSwitchover: 12,
                        maxClusterRadius: 20,
                        rotate: true,
                        size: Size(40, 40),
                        anchor: AnchorPos.align(AnchorAlign.center),
                        fitBoundsOptions: const FitBoundsOptions(
                          padding: EdgeInsets.all(50),
                          maxZoom: 15,
                        ),
                        markers: homeController.RogEvents.map((e) {
                          return Marker(
                            anchorPos: AnchorPos.align(AnchorAlign.center),
                            height: 30.0,
                            width: 30.0,
                            point: LatLng((e!.geometry as GeoJsonMultiPoint).geoSerie!.geoPoints.first.latitude, (e!.geometry as GeoJsonMultiPoint).geoSerie!.geoPoints.first.longitude),
                            builder: (ctx) => Icon(Icons.pin_drop),
                          );
                        }).toList(),
                        popupOptions: PopupOptions(
                            popupSnap: PopupSnap.markerTop,
                            popupController: _popupController,
                            popupBuilder: (_, marker) => Container(
                              width: 350,
                              height: 300,
                              color: Colors.white,
                              child: GestureDetector(
                                onTap: () => debugPrint('Popup tap!'),
                                child: MarkerPopupWidget(homeController.getIncidentForLatLong(marker.point.latitude, marker.point.longitude), homeController),
                              ),
                            )),
                        builder: (context, markers) {
                          return Container(
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(20.0),
                                color: Colors.blue),
                            child: Center(
                              child: Text(
                                markers.length.toString(),
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          );
                        },
                      ),
                    )
                  ],
                )
                ,
                Container(
                  height: 50.0,
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: Colors.grey.shade100,
                      borderRadius: BorderRadius.circular(10.0)
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      const Expanded(
                        child: Padding(
                            padding: EdgeInsets.symmetric(horizontal: 10.0),
                            child: Text("...")
                        ),
                      ),
                      IconButton(
                        icon: Icon(Icons.my_location_outlined,),
                        onPressed: () => {
                          showCurrentPosition()
                        },
                      ),
                    ],
                  ),
                )
              ],
            ),
        ),
      ),
    );
  }
}