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: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 StatelessWidget {
  DestinationMapPage({Key? key}) : super(key: key);

  final IndexController indexController = Get.find<IndexController>();

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

    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;
    }

    String getDisplaytext(Destination dp){
      String txt = "";
      if(dp.cp! > 0){
        txt = "${dp.cp}";
        if(dp.checkin_point != null && dp.checkin_point! > 0){
          txt = txt + "{${dp.checkin_point}}";
        }
        if(dp.buy_point != null && dp.buy_point! > 0){
          txt = txt + "[${dp.buy_point}]";
        }
      }
      return txt;
    }

    List<Marker>? getMarkers() {
      List<Marker> pts = [];
      int index = -1;
      for (int i = 0; i < destinationController.destinations.length; i++) {
        Destination d = destinationController.destinations[i];
        Marker m = Marker(
          point: LatLng(d.lat!, d.lon!),
          anchorPos: AnchorPos.align(AnchorAlign.center),
          builder:(cts){

            return InkWell(
              onTap: (){
                  print("-- Destination is --- ${d.name} ------");
                  if(d != null){
                    if(indexController.currentDestinationFeature.length > 0) {
                      indexController.currentDestinationFeature.clear();
                    }
                    indexController.currentDestinationFeature.add(d);
                    //indexController.getAction();
            
                    showModalBottomSheet(context: Get.context!, isScrollControlled: true, 
                     builder:((context) => BottomSheetNew())
                    );
                  }
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                      width:20,
                      height:20,
                    decoration:  BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                      border: new Border.all(
                        color: Colors.white,
                        width: d.checkin_radious != null ? d.checkin_radious! : 1,
                      ),
                    ),
                    child: new Center(
                      child: new Text(
                        (i + 1).toString(),
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container( color: Colors.yellow, child: Text(getDisplaytext(d), style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold, overflow: TextOverflow.visible),)),
                ],
              ),
            );
          
        });
        
        pts.add(m);
      }
      return pts;
    }

  @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(),
          ),
        ],
      )
    ));
  }

  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) {
            }
            if (mapEvent is MapEventMoveEnd) {
              destinationController.isSelected.value = false;
            }
          });
        });
      } ,
      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,
    ),
    children: [
      TileLayerWidget(
        options: TileLayerOptions(
          urlTemplate: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
      ),
      Obx(() =>
      indexController.routePointLenght > 0 ?
        PolylineLayerWidget(
          options: PolylineLayerOptions(
            polylines: [
              Polyline(
                points: getPoints()!,
                  strokeWidth: 6.0,
                    color: Colors.indigo
              ),
            ],
          ),
        )
        :
        Container(),
      ),
      LocationMarkerLayerWidget(), 
      MarkerLayerWidget(
        options: MarkerLayerOptions(
          markers: getMarkers()!
        ),
      ),
    ],
    
  );
  }
}




// 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();

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

  //   String getDisplaytext(Destination dp){
  //     String txt = "";
  //     if(dp.cp! > 0){
  //       txt = "${dp.cp}";
  //       if(dp.checkin_point != null && dp.checkin_point! > 0){
  //         txt = txt + "{${dp.checkin_point}}";
  //       }
  //       if(dp.buy_point != null && dp.buy_point! > 0){
  //         txt = txt + "[${dp.buy_point}]";
  //       }
  //     }
  //     return txt;
  //   }

  //   List<Marker>? getMarkers() {
  //     List<Marker> pts = [];
  //     int index = -1;
  //     for (int i = 0; i < destinationController.destinations.length; i++) {
  //       Destination d = destinationController.destinations[i];
  //     //for(Destination d in destinationController.destinations){
  //       //print("-----lat ${lat}, ----- lon ${lan}");
  //       Marker m = Marker(
  //         point: LatLng(d.lat!, d.lon!),
  //         anchorPos: AnchorPos.align(AnchorAlign.center),
  //         builder:(cts){

  //           return InkWell(
  //             onTap: (){
  //                 print("-- Destination is --- ${d.name} ------");
  //                 if(d != null){
  //                   if(indexController.currentDestinationFeature.length > 0) {
  //                     indexController.currentDestinationFeature.clear();
  //                   }
  //                   indexController.currentDestinationFeature.add(d);
  //                   //indexController.getAction();
            
  //                   showModalBottomSheet(context: context, isScrollControlled: true, 
  //                    //builder:((context) => BottomSheetWidget())
  //                    builder:((context) => BottomSheetNew())
  //                   );
  //                 }
  //             },
  //             child: Row(
  //               mainAxisAlignment: MainAxisAlignment.spaceBetween,
  //               children: [
  //                 Container(
  //                     width:20,
  //                     height:20,
  //                   decoration:  BoxDecoration(
  //                     color: Colors.red,
  //                     shape: BoxShape.circle,
  //                     border: new Border.all(
  //                       color: Colors.white,
  //                       width: d.checkin_radious != null ? d.checkin_radious! : 1,
  //                     ),
  //                   ),
  //                   child: new Center(
  //                     child: new Text(
  //                       (i + 1).toString(),
  //                       style: TextStyle(color: Colors.white),
  //                     ),
  //                   ),
  //                 ),
  //                 Container( color: Colors.yellow, child: Text(getDisplaytext(d), style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold, overflow: TextOverflow.visible),)),
  //               ],
  //             ),
  //           );

  //         //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: Container(
  //         //       width: 60,
  //         //       height: 60,
  //         //       decoration: BoxDecoration(
  //         //         borderRadius: BorderRadius.circular(d.checkin_radious ?? 0),
  //         //         color: Colors.transparent,
  //         //         border: BoxBorder()
  //         //       ),
  //         //         child: Icon(Icons.pin_drop)
  //         //         )
  //         //       );
          
  //       });
        
  //       pts.add(m);
  //     }
  //     return pts;
  //   }

  // @override
  // void initState() {

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

  // void reload(){
  //   setState(() {
      
  //   });
  // }

  // @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(indexController.routePoints),
  //         ),
  //         // Positioned(
  //         //   bottom: 200,
  //         //   left: 10,
  //         //   child: Container(
  //         //     color: Colors.white,
  //         //     child: Row(
  //         //       children: [
  //         //         Text(destinationController.gps[0]),
  //         //         Text(destinationController.locationPermission[0])
  //         //       ],
  //         //     ),
  //         //   )
  //         // ),
  //       ],
  //     )
  //   ));
  // }

  // FlutterMap TravelMap(List<PointLatLng> ptts) {
  //   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.value = 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://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
  //         subdomains: ['a', 'b', 'c'],
  //       ),
  //     ),
  //     //Obx(() =>
  //     indexController.routePoints.length > 0 ?
  //       PolylineLayerWidget(
  //         options: PolylineLayerOptions(
  //           polylines: [
  //             Polyline(
  //               points: getPoints(ptts)!,
  //                 strokeWidth: 6.0,
  //                   color: Colors.indigo
  //             ),
  //           ],
  //         ),
  //       )
  //       :
  //       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()!
  //       ),
  //     ),
  //   ],
    
  // );
  // }
//}