import 'package:flutter/material.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.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';

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>();

    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];
        Marker m = Marker(point: LatLng(lat, lan), builder:(cts){
          return 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(
        bounds: indexController.currentBound.length > 0 ? indexController.currentBound[0]: LatLngBounds.fromPoints([LatLng(35.03999881162295, 136.40587119778962), LatLng(36.642756778706904, 137.95226720406063)]),
        zoom: 5.0,
      ),
      layers: [
        TileLayerOptions(
          urlTemplate:
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c']),
        MarkerLayerOptions(
          markers: getMarkers()!,
        ),
        PolylineLayerOptions(
          polylines: [
            Polyline(
              points: getPoints()!,
                strokeWidth: 4.0,
                  color: Colors.purple),
          ],
        ),
      ],
    )
    ));
  }
}