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_map_tile_caching/flutter_map_tile_caching.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/utils/text_util.dart';
import 'package:rogapp/widgets/base_layer_widget.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;
    }

    List<Marker>? getMarkers() {
      List<Marker> pts = [];
      int index = -1;
      for (int i = 0; i < destinationController.destinations.length; i++) {
        Destination d = destinationController.destinations[i];
        print("^^^^ ${d} ^^^^");
        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())
                    ).whenComplete((){
                      print("---- set skip gps to false -----");
                      destinationController.skip_gps = false;
                    });
                  }
              },
              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(TextUtils.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())
          // :
          // Padding(
          //   padding: const EdgeInsets.only(left:8.0),
          //   child: BreadCrumbWidget(mapController:indexController.rogMapController),
          // ),
          Padding(
            padding: const EdgeInsets.only(top:0.0),
            //child: TravelMap(),
            child: 
              TravelMap(),
          ),
        ],
      )
    ));
  }

  FlutterMap TravelMap() {
    return FlutterMap(
      mapController: indexController.rogMapController,
    options: MapOptions(
      onMapReady: (){
            indexController.is_rog_mapcontroller_loaded.value = true;
            subscription = indexController.rogMapController!.mapEventStream.listen((MapEvent mapEvent) {
            if (mapEvent is MapEventMoveStart) {
            }
            if (mapEvent is MapEventMoveEnd) {
              //destinationController.is_gps_selected.value = true;
              //indexController.mapController!.move(c.center, c.zoom);
              LatLngBounds bounds = indexController.rogMapController!.bounds!;
              indexController.currentBound.clear();
              indexController.currentBound.add(bounds);
              if(indexController.currentUser.length <= 0){
                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,
    ),
    children: [
      BaseLayer(),
      Obx(() =>
      indexController.routePointLenght > 0 ?
        PolylineLayer(
            polylines: [
              Polyline(
                points: getPoints()!,
                  strokeWidth: 6.0,
                    color: Colors.indigo
              ),
            ],
        )
        
        :
        Container(),
      ),
      CurrentLocationLayer(), 
      MarkerLayer(
        markers: getMarkers()!
      ),
    ],
    
  );
  }
}