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_cluster/flutter_map_marker_cluster.dart';
import 'package:geojson/geojson.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:latlong2/latlong.dart';
import 'package:rogapp/pages/index/index_controller.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';

class MapWidget extends StatelessWidget {

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

  MapWidget({ Key? key}) : super(key: key);

  StreamSubscription? subscription;

  Widget getMarkerShape(GeoJsonFeature i, BuildContext context){
    GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
    //print("lat is ${p.geoSerie!.geoPoints[0].latitude} and lon is ${p.geoSerie!.geoPoints[0].longitude}");
    RegExp regex = RegExp(r'([.]*0)(?!.*\d)');
    return Row(
                                      mainAxisAlignment: MainAxisAlignment.start,
                                      children: [
                                        InkWell(
                                          onTap: () {                                            
                                                  GeoJsonFeature? fs = indexController.getFeatureForLatLong(p.geoSerie!.geoPoints[0].latitude, p.geoSerie!.geoPoints[0].longitude);
                                                  print("------- fs ${fs}------");
                                                  if(fs != null){
                                                    indexController.currentFeature.clear();
                                                    indexController.currentFeature.add(fs);
                                                    //print("----- fs is ${fs.properties!['photos']}");
                                                    indexController.getAction();
                              
                                                    showModalBottomSheet(
                                                      context: context, 
                                                      isScrollControlled: true, 
                                                      isDismissible: true,
                                                      builder:((context) => BottomSheetNew())
                                                      //builder:((context) => BottomSheetWidget())
                                                    );
                                                  }




                                          },
                                          child: Container(
                                            height: 32,
                                            width: 32,
                                              decoration: BoxDecoration(
                                                shape: BoxShape.circle,
                                                color: Colors.transparent,
                                                border: Border.all(
                                                  color: i.properties!['buy_point'] > 0 ? Colors.blue : Colors.red,
                                                  width: 3,
                                                  style: BorderStyle.solid
                                                )
                                              ),
                                              child: Stack(
                                                alignment: Alignment.center,
                                                children: [
                                                  Icon(Icons.circle,size: 6.0,),
                                                  i.properties!['cp'] == -1 ?
                                                    Transform.rotate(
                                                      alignment: Alignment.centerLeft,
                                                      origin: Offset.fromDirection(1, 26),
                                                      angle: 270 * pi / 180,
                                                      child: Icon(Icons.play_arrow_outlined, color: Colors.red, size: 70,)):
                                                    Container(color: Colors.transparent,),
                                                ],
                                              )
                                            ),
                                        ),
                                          Container(color: Colors.white, child: Text(TextUtils.getDisplayTextFeture(i), style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color:Colors.red,))),
                                      ],
                                    );
  }

  @override
  Widget build(BuildContext context) {

    print("---------- rog mode is ${indexController.rog_mode.value.toString()}----------");

    final PopupController _popupController = PopupController();
    return Stack(
                  children: [
                    Obx(() => 
                      indexController.is_loading == true ? Padding(
                        padding: const EdgeInsets.only(top: 60.0),
                        child: CircularProgressIndicator(),
                      ):
                      FlutterMap(
                      mapController: indexController.mapController,
                      options: MapOptions(
                          maxZoom:18.4,
                          onMapReady: (){
                            indexController.is_mapController_loaded.value = true;
                            subscription = indexController.mapController.mapEventStream.listen((MapEvent mapEvent) {
                              if (mapEvent is MapEventMoveStart) {
                                  //print(DateTime.now().toString() + ' [MapEventMoveStart] START');
                                  // do something
                                }
                                if (mapEvent is MapEventMoveEnd && indexController.currentUser. length <= 0) {
                                  //print(DateTime.now().toString() + ' [MapEventMoveStart] END');
                                  indexController.loadLocationsBound();
                                  //indexController.rogMapController!.move(c.center, c.zoom);
                                }
                              });

                          },
                          //center: LatLng(37.15319600454702, 139.58765950528198),
                          bounds: indexController.currentBound.length > 0 ? indexController.currentBound[0]: LatLngBounds.fromPoints([LatLng(35.03999881162295, 136.40587119778962), LatLng(36.642756778706904, 137.95226720406063)]),
                          zoom: 1,
                          interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag,
                          
                          onPositionChanged: (MapPosition pos, isvalue){

                          },
                          onTap: (_, __) =>
                              _popupController
                                  .hideAllPopups(), // Hide popup when the map is tapped.
                        ),
                        children: [
                          BaseLayer(),
                          CurrentLocationLayer(),
                          indexController.locations.isNotEmpty && indexController.locations[0].collection.isNotEmpty ?
                          MarkerLayer(
                            markers:indexController.locations[0].collection.map((i) {
                                      print("i si ${i.properties!['location_id']}");
                                      
                                      RegExp regex = RegExp(r'([.]*0)(?!.*\d)');
                                      GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
                                      print("lat is ${p.geoSerie!.geoPoints[0].latitude} and lon is ${p.geoSerie!.geoPoints[0].longitude}");
                                      return Marker(
                                        anchorPos: AnchorPos.exactly(Anchor(108.0, 18.0)),
                                        height: 32.0,
                                        width: 120.0,
                                        point: LatLng(p.geoSerie!.geoPoints[0].latitude, p.geoSerie!.geoPoints[0].longitude),
                                        builder: (ctx){
                                          return getMarkerShape(i, context);
                                        },
                                      );
                                    }).toList(),
                          )
                          :
                          Center(child: CircularProgressIndicator())
                          ,
                        ],
                    )
                    )
                  ],
                );
  }
}