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:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:geojson/geojson.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/utils/text_util.dart';
import 'package:rogapp/widgets/base_layer_widget.dart';
import 'package:rogapp/widgets/bottom_sheet_new.dart';

class MapWidget extends StatelessWidget {
  final IndexController indexController = Get.find<IndexController>();
  final DestinationController destinationController =
      Get.find<DestinationController>();

  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']}");

              Destination des = destinationController.festuretoDestination(fs);

              showModalBottomSheet(
                  constraints:
                      BoxConstraints.loose(Size(Get.width, Get.height * 0.85)),
                  context: context,
                  isScrollControlled: true,
                  isDismissible: true,
                  builder: ((context) => BottomSheetNew(
                        destination: des,
                      ))
                  //builder:((context) => BottomSheetWidget())
                  ).whenComplete(() {
                destinationController.skipGps = false;
              });
            }
          },
          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: [
                  const 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: const Icon(
                            Icons.play_arrow_outlined,
                            color: Colors.red,
                            size: 70,
                          ))
                      : Container(
                          color: Colors.transparent,
                        ),
                ],
              )),
        ),
        Container(
            color: Colors.white.withOpacity(0.4),
            child: Text(TextUtils.getDisplayTextFeture(i),
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.red,
                ))),
      ],
    );
  }

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

  @override
  Widget build(BuildContext context) {
    // print(
    //     "---------- rog mode is ${indexController.rog_mode.value.toString()}----------");

    final PopupController popupController = PopupController();
    return Stack(
      children: [
        Obx(() => indexController.isLoading.value == true
            ? const Padding(
                padding: EdgeInsets.only(top: 60.0),
                child: CircularProgressIndicator(),
              )
            : FlutterMap(
                mapController: indexController.mapController,
                options: MapOptions(
                  maxZoom: 18.4,
                  onMapReady: () {
                    subscription = indexController.mapController.mapEventStream
                        .listen((MapEvent mapEvent) {
                      if (mapEvent is MapEventMoveStart) {
                        //print(DateTime.now().toString() + ' [MapEventMoveStart] START');
                        // do something
                      }
                      if (mapEvent is MapEventMoveEnd) {}
                    });
                  },
                  //center: LatLng(37.15319600454702, 139.58765950528198),
                  bounds: indexController.currentBound.isNotEmpty
                      ? 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) {
                    indexController.currentBound = [pos.bounds!];
                  },
                  onTap: (_, __) => popupController
                      .hideAllPopups(), // Hide popup when the map is tapped.
                ),
                children: [
                  const BaseLayer(),
                  Obx(
                    () => indexController.routePointLenght > 0
                        ? PolylineLayer(
                            polylines: [
                              Polyline(
                                  points: getPoints()!,
                                  strokeWidth: 6.0,
                                  color: Colors.indigo),
                            ],
                          )
                        : Container(),
                  ),
                  CurrentLocationLayer(
                    followOnLocationUpdate: FollowOnLocationUpdate.never,
                    turnOnHeadingUpdate: TurnOnHeadingUpdate.never,
                    style: const LocationMarkerStyle(
                      marker: DefaultLocationMarker(
                        child: Icon(
                          Icons.navigation,
                          color: Colors.yellowAccent,
                        ),
                      ),
                      markerSize: Size(27, 27),
                      markerDirection: MarkerDirection.heading,
                    ),
                  ),
                  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(),
                        )
                      : const Center(child: CircularProgressIndicator()),
                ],
              ))
      ],
    );
  }
}