import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:flutter_map_marker_popup/flutter_map_marker_popup.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:geojson/geojson.dart';
import 'package:geolocator/geolocator.dart';
import 'package:get/get.dart';
import 'package:latlong2/latlong.dart';
import 'package:rogapp/model/destination.dart';
import 'package:rogapp/pages/destination/destination_controller.dart';
//import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:rogapp/pages/index/index_controller.dart';
import 'package:rogapp/services/destination_service.dart';
import 'package:rogapp/widgets/bottom_sheet_new.dart';
import 'package:rogapp/widgets/bottom_sheet_widget.dart';
import 'package:rogapp/widgets/bread_crum_widget.dart';

class DestinationMapPage extends StatefulWidget {
  DestinationMapPage({ Key? key }) : super(key: key);


  @override
  State<DestinationMapPage> createState() => _DestinationMapPageState();
}

class _DestinationMapPageState extends State<DestinationMapPage> {
  final IndexController indexController = Get.find<IndexController>();

  final DestinationController destinationController = Get.find<DestinationController>();
  StreamSubscription? subscription;
  final PopupController _popupLayerController = PopupController();



  // Widget examplePopup(Marker marker){
  //   return Padding(
  //     padding: const EdgeInsets.all(10),
  //     child: Container(
  //       constraints: const BoxConstraints(minWidth: 100, maxWidth: 200),
  //       color: Colors.white,
  //       child: Column(
  //         crossAxisAlignment: CrossAxisAlignment.start,
  //         mainAxisAlignment: MainAxisAlignment.start,
  //         mainAxisSize: MainAxisSize.min,
  //         children: <Widget>[
  //           const Text(
  //             'Popup for a marker!',
  //             overflow: TextOverflow.fade,
  //             softWrap: false,
  //             style: TextStyle(
  //               fontWeight: FontWeight.w500,
  //               fontSize: 14.0,
  //             ),
  //           ),
  //           const Padding(padding: EdgeInsets.symmetric(vertical: 4.0)),
  //           Text(
  //             'Position: ${marker.point.latitude}, ${marker.point.longitude}',
  //             style: const TextStyle(fontSize: 12.0),
  //           ),
  //           Text(
  //             'Marker size: ${marker.width}, ${marker.height}',
  //             style: const TextStyle(fontSize: 12.0),
  //           ),
  //         ],
  //       ),
  //     ),
  //   );
  // }



    List<LatLng>? getPoints(){
      //print("##### --- route point ${indexController.routePoints.length}");
      List<LatLng> pts = [];
      for(PointLatLng p in indexController.routePoints){
        LatLng l = LatLng(p.latitude, p.longitude);
        pts.add(l);
      }
      return pts;
    }

    List<Marker>? getMarkers() {
      List<Marker> pts = [];
      for(Destination d in destinationController.destinations){
        //print("-----lat ${lat}, ----- lon ${lan}");
        Marker m = Marker(point: LatLng(d.lat!, d.lon!), builder:(cts){
          //return Icon(Icons.pin_drop);
          return IconButton(
            onPressed: ()async {
                  Destination? fs = await destinationController.getDEstinationForLatLong(d.lat!, d.lon!);
                  print("-- Destination is --- ${fs!.name} ------");
                  if(fs != null){
                    if(indexController.currentDestinationFeature.length > 0) {
                      indexController.currentDestinationFeature.clear();
                    }
                    indexController.currentDestinationFeature.add(fs);
                    //indexController.getAction();
            
                    showModalBottomSheet(context: context, isScrollControlled: true, 
                     //builder:((context) => BottomSheetWidget())
                     builder:((context) => BottomSheetNew())
                    );
                  }
              }, 
              icon: Icon(Icons.pin_drop));
          
        });
        
        pts.add(m);
      }
      return pts;
    }

  @override
  void initState() {

    DestinationService.getDestinationLine(destinationController.destinations)?.then((value){
      //print("---- loading destination points ------ ${value}");
      indexController.routePoints.clear();
      setState(() {
        indexController.routePoints = value;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Obx((() => 
      Stack(
        children: [
          indexController.is_rog_mapcontroller_loaded.value == false ? 
            Center(child: CircularProgressIndicator())
          :
          BreadCrumbWidget(mapController:indexController.rogMapController),
          Padding(
            padding: const EdgeInsets.only(top:50.0),
            //child: TravelMap(),
            child: 
              TravelMap(),
          ),
          // Positioned(
          //   bottom: 200,
          //   left: 10,
          //   child: Container(
          //     color: Colors.white,
          //     child: Row(
          //       children: [
          //         Text(destinationController.gps[0]),
          //         Text(destinationController.locationPermission[0])
          //       ],
          //     ),
          //   )
          // ),
        ],
      )
    ));
  }

  FlutterMap TravelMap() {
    return FlutterMap(
    options: MapOptions(
      onMapCreated: (c){
        indexController.rogMapController = c;
        indexController.rogMapController!.onReady.then((_) {
            indexController.is_rog_mapcontroller_loaded.value = true;
            subscription = indexController.rogMapController!.mapEventStream.listen((MapEvent mapEvent) {
            if (mapEvent is MapEventMoveStart) {
                                //print(DateTime.now().toString() + ' [MapEventMoveStart] START');
                                // do something
            }
            if (mapEvent is MapEventMoveEnd) {
              destinationController.isSelected.clear();
              destinationController.isSelected.add(false);
                                //print(DateTime.now().toString() + ' [MapEventMoveStart] END');
              //indexController.loadLocationsBound();
            }
          });
        });
      } ,
      bounds: indexController.currentBound.length > 0 ? indexController.currentBound[0]: LatLngBounds.fromPoints([LatLng(35.03999881162295, 136.40587119778962), LatLng(36.642756778706904, 137.95226720406063)]),
      zoom: 1,
      maxZoom: 42,
      interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag,
      //plugins: [LocationMarkerPlugin(),]
    ),
    children: [
      TileLayerWidget(
        options: TileLayerOptions(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
      ),
      //Obx(() =>
      indexController.routePoints.length > 0 ?
        PolylineLayerWidget(
          options: PolylineLayerOptions(
            polylines: [
              Polyline(
                points: getPoints()!,
                  strokeWidth: 4.0,
                    color: Colors.purple),
            ],
          ),
        )
        :
        Container(),
      //),
      // PopupMarkerLayerWidget(
      //   options: PopupMarkerLayerOptions(
      //     popupController: _popupLayerController,
      //     markers: _markers,
      //     markerRotateAlignment:
      //         PopupMarkerLayerOptions.rotationAlignmentFor(AnchorAlign.top),
      //     popupBuilder: (BuildContext context, Marker marker) =>
            
      //         examplePopup(marker),
      //   ),
      // ),
      LocationMarkerLayerWidget(), 
      MarkerLayerWidget(
        options: MarkerLayerOptions(
          markers: getMarkers()!
        ),
      ),
    ],
    
  );
  }
}