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/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_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),
            ),
          ],
        ),
      ),
    );
  }




    final List<LatLng> _markerPositions = [
    LatLng(35.728728732933455, 137.06878077038706),
    LatLng(35.958218259568305, 137.06187578986646),
    LatLng(35.76795686324816, 137.08949571194879),
  ];



    List<Marker> get _markers => _markerPositions
      .map(
        (markerPosition) => Marker(
          point: markerPosition,
          width: 40,
          height: 40,
          builder: (_) => const Icon(Icons.location_on, size: 40),
          anchorPos: AnchorPos.align(AnchorAlign.top),
        ),
      )
      .toList();



    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(dynamic d in destinationController.destinations){
        double lat = d["location"]["geometry"]["coordinates"][0][1];
        double lan = d["location"]["geometry"]["coordinates"][0][0];
        //print("-----lat ${lat}, ----- lon ${lan}");
        Marker m = Marker(point: LatLng(lat, lan), builder:(cts){
          //return Icon(Icons.pin_drop);
          return IconButton(
            onPressed: ()async {
                  GeoJsonFeature? fs = await destinationController.getDEstinationForLatLong(lat, lan);
                  print("----fsf-----${fs}");
                  if(fs != null){
                    if(indexController.currentFeature.length > 0) {
                      indexController.currentFeature.clear();
                    }
                    indexController.currentFeature.add(fs);
                    indexController.getAction();
            
                    showModalBottomSheet(context: context, isScrollControlled: true, 
                     builder:((context) => BottomSheetWidget())
                    );
                  }
              }, 
              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();
      indexController.routePoints = value;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Obx((() => 
      FlutterMap(
      options: MapOptions(
        onMapCreated: (c){
          indexController.rogMapController = c;
          indexController.rogMapController!.onReady.then((_) {
              subscription = indexController.rogMapController!.mapEventStream.listen((MapEvent mapEvent) {
              if (mapEvent is MapEventMoveStart) {
                                  //print(DateTime.now().toString() + ' [MapEventMoveStart] START');
                                  // do something
              }
              if (mapEvent is MapEventMoveEnd) {
                                  //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: 20,
        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'],
          ),
        ),
        PolylineLayerWidget(
          options: PolylineLayerOptions(
          polylines: [
            Polyline(
              points: getPoints()!,
                strokeWidth: 4.0,
                  color: Colors.purple),
          ],
        ),
        ),
        // PopupMarkerLayerWidget(
        //   options: PopupMarkerLayerOptions(
        //     popupController: _popupLayerController,
        //     markers: _markers,
        //     markerRotateAlignment:
        //         PopupMarkerLayerOptions.rotationAlignmentFor(AnchorAlign.top),
        //     popupBuilder: (BuildContext context, Marker marker) =>
              
        //         examplePopup(marker),
        //   ),
        // ),
        MarkerLayerWidget(
          options: MarkerLayerOptions(
            markers: getMarkers()!
          ),
        )
      ],
      
    )
    ));
  }
}