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: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 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 (indexController.currentDestinationFeature.isNotEmpty) {
                  indexController.currentDestinationFeature.clear();
                }
                indexController.currentDestinationFeature.add(d);
                //indexController.getAction();

                showModalBottomSheet(
                    context: Get.context!,
                    isScrollControlled: true,
                    constraints: BoxConstraints.loose(
                        Size(Get.width, Get.height * 0.85)),
                    builder: ((context) => BottomSheetNew(
                          destination: d,
                        ))).whenComplete(() {
                  //print("---- set skip gps to false -----");
                  destinationController.skipGps = false;
                });
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 20,
                    height: 20,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: Colors.white,
                        width:
                            d.checkin_radious != null ? d.checkin_radious! : 1,
                      ),
                    ),
                    child: Center(
                      child: Text(
                        (i + 1).toString(),
                        style: const TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                      color: Colors.yellow,
                      child: Text(
                        TextUtils.getDisplayText(d),
                        style: const 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.isRogMapcontrollerLoaded.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.isEmpty) {
                indexController.loadLocationsBound();
              }
            }
          });
        },
        bounds: indexController.currentBound.isNotEmpty
            ? 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: [
        const BaseLayer(),
        Obx(
          () => indexController.routePointLenght > 0
              ? PolylineLayer(
                  polylines: [
                    Polyline(
                        points: getPoints()!,
                        strokeWidth: 6.0,
                        color: Colors.indigo),
                  ],
                )
              : Container(),
        ),
        CurrentLocationLayer(),
        MarkerLayer(markers: getMarkers()!),
      ],
    );
  }
}
