import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:manager_api_new/api.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart' as mapBox;
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/Screens/Sections/Map/map_context.dart';
import 'package:mymuseum_visitapp/Screens/Sections/Map/map_page.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:provider/provider.dart';
import 'package:html/parser.dart' show parse;

class MapBoxView extends StatefulWidget {
  final MapDTO? mapDTO;
  final List<GeoPointDTO> geoPoints;
  final List<Map<String, dynamic>> icons;
  final String? language;
  const MapBoxView({
    Key? key,
    this.mapDTO,
    required this.geoPoints,
    required this.icons,
    this.language,
  }) : super(key: key);

  @override
  _MapBoxViewState createState() => _MapBoxViewState();
}

class AnnotationClickListener extends mapBox.OnPointAnnotationClickListener {
  late List<GeoPointDTO> markersList;
  late MapContext mapContext;

  AnnotationClickListener({
    required this.markersList,
    required this.mapContext,
  });

  @override
  void onPointAnnotationClick(mapBox.PointAnnotation annotation) {
    try{
      var markerToShow = markersList.firstWhere((ml) => "${parse(ml.title!.first.value).documentElement!.text}${ml.latitude}${ml.longitude}" == annotation.textField);
      mapContext.setSelectedPoint(markerToShow);
      //mapContext.setSelectedPointForNavigate(markerToShow);
    } catch(e) {
      print("ISSSUE setSelectedMarker");
      print(e);
    }
  }
}

class _MapBoxViewState extends State<MapBoxView> {
  late mapBox.MapboxMap? mapboxMap;
  mapBox.PointAnnotationManager? pointAnnotationManager;
  bool filterZoneSelected = false;

  createPoints() {
    var options = <mapBox.PointAnnotationOptions>[];
    int i = 0;
    markersList = [];
    pointsToShow!.forEach((point) {
      if(point.title!.where((translation) => translation.language == widget.language).firstOrNull != null) {
        var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == widget.language).value);
        point.id = i;
        point.title = point.title!.where((t) => t.language == widget.language).toList();
        /*var mapMarker = new MapMarker(
          id: i,
          title: parse(textSansHTML.body!.text).documentElement!.text,
          description: point.description!.firstWhere((translation) => translation.language == widget.language).value,
          longitude: point.longitude,
          latitude: point.latitude,
          contents: point.contents
      );*/
        markersList.add(point);
        options.add(mapBox.PointAnnotationOptions(
          geometry: mapBox.Point(
              coordinates: mapBox.Position(
                double.tryParse(point.longitude!)!,
                double.tryParse(point.latitude!)!,
              )), // .toJson()
          iconSize: 1.3,
          textField: "${parse(textSansHTML.body!.text).documentElement!.text}${point.latitude}${point.longitude}",
          textOpacity: 0.0,
          iconOffset: [0.0, 0.0],
          symbolSortKey: 10,
          iconColor: 0,
          iconImage: null,
          image: point.categorieId == null ? widget.icons.where((i) => i['id'] == null).first['icon'] : widget.icons.any((i) => i['id'] == point.categorieId) ? widget.icons.where((i) => i['id'] == point.categorieId).first['icon'] : widget.icons.where((i) => i['id'] == null).first['icon'], //widget.selectedMarkerIcon,
        )); // ,

        i++;
      }
    });

    print(options.length);

    return options;
  }

  _onMapCreated(mapBox.MapboxMap mapboxMap, MapContext mapContext) {
    this.mapboxMap = mapboxMap;
    
    mapboxMap.annotations.createPointAnnotationManager().then((pointAnnotationManager) async {
      this.pointAnnotationManager = pointAnnotationManager;
      pointAnnotationManager.createMulti(createPoints());
      pointAnnotationManager.addOnPointAnnotationClickListener(AnnotationClickListener(mapContext: mapContext, markersList: markersList));
      init = true;
    });
  }

  ConfigurationDTO? configurationDTO;
  //Completer<GoogleMapController> _controller = Completer();
  //Set<Marker> markers = {};
  List<GeoPointDTO>? pointsToShow = [];
  List<String>? selectedCategories = [];
  bool init = false;

  @override
  void initState() {
    pointsToShow = widget.geoPoints;//widget.mapDTO!.points;
    var nonNullCat = widget.mapDTO!.categories!.where((c) => c.label!.where((element) => element.language == widget.language).firstOrNull != null);
    selectedCategories = nonNullCat.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList();
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final mapContext = Provider.of<MapContext>(context);

    pointsToShow = widget.geoPoints;//widget.mapDTO!.points;

    if(pointAnnotationManager != null) {
      pointAnnotationManager!.deleteAll();
      pointAnnotationManager!.createMulti(createPoints());
      //mapContext.notifyListeners();
    }

    final appContext = Provider.of<AppContext>(context);
    VisitAppContext visitAppContext = appContext.getContext() as VisitAppContext;
    Size size = MediaQuery.of(context).size;

    var type = mapBox.MapboxStyles.STANDARD;
    if(widget.mapDTO!.mapTypeMapbox != null) {
      switch(widget.mapDTO!.mapTypeMapbox!) {
        case MapTypeMapBox.standard:
          type = mapBox.MapboxStyles.STANDARD;
          break;
        case MapTypeMapBox.streets:
          type = mapBox.MapboxStyles.MAPBOX_STREETS;
          break;
        case MapTypeMapBox.outdoors:
          type = mapBox.MapboxStyles.OUTDOORS;
          break;
        case MapTypeMapBox.light:
          type = mapBox.MapboxStyles.LIGHT;
          break;
        case MapTypeMapBox.dark:
          type = mapBox.MapboxStyles.DARK;
          break;
        case MapTypeMapBox.satellite:
          type = mapBox.MapboxStyles.SATELLITE;
          break;
        case MapTypeMapBox.satellite_streets:
          type = mapBox.MapboxStyles.SATELLITE_STREETS;
          break;
      }
    }
    return Stack(
      children: [
        Center(
          child: mapBox.MapWidget(
            key: ValueKey("mapBoxWidget"),
            styleUri: type,
            onMapCreated: (maBoxMap) {
              _onMapCreated(maBoxMap, mapContext);
            },
            onTapListener: (listener) {
              // close on tap
              //mapContext.setSelectedPoint(null);
              mapContext.setSelectedPointForNavigate(null);
            },
            cameraOptions: mapBox.CameraOptions(
                center: mapBox.Point(coordinates: widget.mapDTO!.longitude != null && widget.mapDTO!.latitude != null ? mapBox.Position(double.tryParse(widget.mapDTO!.longitude!)!, double.tryParse(widget.mapDTO!.latitude!)!) : mapBox.Position(4.865105, 50.465503)), //.toJson()
                zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 12),
          )
        ),
        Container(
          child: Builder(
              builder: (context) {
                return Consumer<MapContext>(
                  builder: (context, mapContext, _) {
                    var geoPoint = mapContext.getSelectedPointForNavigate() as GeoPointDTO?;
                    if (geoPoint != null && mapboxMap != null) {
                      print("COUCOU IL FAUT NAVUGATE MAPBOX");
                      // TODO Handle zoomDetail
                      mapboxMap?.easeTo(
                          mapBox.CameraOptions(
                              center: mapBox.Point(coordinates: mapBox.Position(double.tryParse(geoPoint.longitude!)!, double.tryParse(geoPoint.latitude!)!)), //.toJson()
                              zoom: 16,
                              bearing: 0,
                              pitch: 3),
                          mapBox.MapAnimationOptions(duration: 2000, startDelay: 0));
                    }
                    return SizedBox();
                  },
                );
              }
          ),
        )
        /*Positioned(
            left: 5,
            top: 35,
            child: SizedBox(
              width: size.width * 0.3,
              height: size.height * 0.76,
              child: GeoPointFilter(
                language: tabletAppContext.language!,
                geoPoints: widget.mapDTO!.points!,
                categories: widget.mapDTO!.categories!,
                filteredPoints: (filteredPoints) {
                  print("COUCOU FILTERED POINTS");
                  print(filteredPoints);
                }),
            ),
        ),*/
      ],
    );
  }

}