import 'dart:async';
import 'dart:typed_data';
import 'package:enum_to_string/enum_to_string.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:manager_api/api.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart' as mapBox;
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/multi_select_container.dart';
import 'package:tablet_app/Models/map-marker.dart';
import 'package:tablet_app/Screens/Map/map_context.dart';
import 'package:html/parser.dart' show parse;
import 'package:tablet_app/Screens/Map/map_view.dart';
import 'package:tablet_app/constants.dart';

class MapBoxView extends StatefulWidget {
  final MapDTO? mapDTO;
  final Uint8List? selectedMarkerIcon;
  final String? language;
  const MapBoxView({
    Key? key,
    this.mapDTO,
    this.selectedMarkerIcon,
    this.language,
  }) : super(key: key);

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

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

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

  @override
  void onPointAnnotationClick(mapBox.PointAnnotation annotation) {
    try{
      var markerToShow = markersList.firstWhere((ml) => ml.id.toString() == annotation.textField);
      mapContext.setSelectedMarker(markerToShow);
    } catch(e) {
      print("ISSSUE setSelectedMarker");
      print(e);
    }
  }
}

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

  _onMapCreated(mapBox.MapboxMap mapboxMap, MapContext mapContext) {
    this.mapboxMap = mapboxMap;
    
    mapboxMap.annotations.createPointAnnotationManager().then((pointAnnotationManager) async {
      this.pointAnnotationManager = pointAnnotationManager;

      var options = <mapBox.PointAnnotationOptions>[];
      pointsToShow!.forEach((point) {
        var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == widget.language).value);
        var mapMarker = new MapMarker(
            id: point.id,
            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(mapMarker);
        if (mapMarker.latitude != null && mapMarker.longitude != null) {
          /*markers.add(Marker(
              draggable: false,
              markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!),
              position: LatLng(
                double.tryParse(mapMarker.latitude!)!,
                double.tryParse(mapMarker.longitude!)!,
              ),
              icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker,
              /*icon: BitmapDescriptor.defaultMarkerWithHue(
              BitmapDescriptor.hueYellow,
            ),*/
              onTap: () {
                //setState(() {
                print("coucou tapped");
                /*mapContext.setSelectedMarker(
                    new MapMarker(
                      title: mapMarker.title,
                      contents: mapMarker.contents,
                      description: mapMarker.description,
                      longitude: mapMarker.longitude,
                      latitude: mapMarker.latitude,
                    )
                );*/
                //});
              },
              infoWindow: InfoWindow.noText));*/
        }
        print("ADD POINT TO MAPPPPPPPPPPPP");
        print(widget.selectedMarkerIcon);
        options.add(mapBox.PointAnnotationOptions(
            geometry: mapBox.Point(
              coordinates: mapBox.Position(
                double.tryParse(mapMarker.longitude!)!,
                double.tryParse(mapMarker.latitude!)!,
              )).toJson(),
            iconSize: 1.3,
            textField: mapMarker.id.toString(),
            textOpacity: 0.0,
            iconOffset: [0.0, 0.0],
            symbolSortKey: 10,
            iconColor: 0,
            iconImage: widget.selectedMarkerIcon == null ? "car-15": null,
            image: widget.selectedMarkerIcon, //widget.selectedMarkerIcon,
        )); // ,
      });
      /*options.add(mapBox.PointAnnotationOptions(
          geometry: mapBox.Point(
              coordinates: mapBox.Position(
                0.381457,
                6.687337,
              )).toJson(), image: widget.selectedMarkerIcon));*/
      print(options.length);
      pointAnnotationManager.createMulti(options);

      /*var carOptions = <mapBox.PointAnnotationOptions>[];
      for (var i = 0; i < 20; i++) {
        carOptions.add(mapBox.PointAnnotationOptions(
            geometry: mapBox.Point(
                coordinates: mapBox.Position(
                  double.tryParse(mapMarker.longitude!)!,
                  double.tryParse(mapMarker.latitude!)!,
                )).toJson(), iconImage: "car-15"));
      }*/
      //pointAnnotationManager.createMulti(carOptions);
      pointAnnotationManager.addOnPointAnnotationClickListener(AnnotationClickListener(mapContext: mapContext, markersList: markersList));
    });
  }

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

  /*Set<Marker> getMarkers(language, mapContext) {
    markers = {};

    pointsToShow!.forEach((point) {
      var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == language).value);
      var mapMarker = new MapMarker(
          id: point.id,
          title: parse(textSansHTML.body!.text).documentElement!.text,
          description: point.description!.firstWhere((translation) => translation.language == language).value,
          longitude: point.longitude,
          latitude: point.latitude,
          contents: point.contents
      );
      if (mapMarker.latitude != null && mapMarker.longitude != null) {
        markers.add(Marker(
            draggable: false,
            markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!),
            position: LatLng(
              double.tryParse(mapMarker.latitude!)!,
              double.tryParse(mapMarker.longitude!)!,
            ),
            icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker,
            /*icon: BitmapDescriptor.defaultMarkerWithHue(
              BitmapDescriptor.hueYellow,
            ),*/
            onTap: () {
              //setState(() {
              mapContext.setSelectedMarker(
                  new MapMarker(
                    title: mapMarker.title,
                    contents: mapMarker.contents,
                    description: mapMarker.description,
                    longitude: mapMarker.longitude,
                    latitude: mapMarker.latitude,
                  )
              );
              //});
            },
            infoWindow: InfoWindow.noText));
      }
    });
    return markers;
  }*/

  @override
  void initState() {
    pointsToShow = widget.mapDTO!.points;
    selectedCategories = widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList();
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

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

    if(!init) {
      print("getmarkers in build");
      //getMarkers(widget.language, mapContext);
      init = true;
    }
    //MapTypeApp? mapTypeApp = MapTypeApp.fromJson(widget.mapDTO!.mapType!.value);
    //print(mapTypeApp.toString());

    MapType type = MapType.hybrid;
    //if(kIsWeb) {
      if(widget.mapDTO!.mapType != null) {
        switch(widget.mapDTO!.mapType!.value) {
          case 0:
            type = MapType.none;
            break;
          case 1:
            type = MapType.normal;
            break;
          case 2:
            type = MapType.satellite;
            break;
          case 3:
            type = MapType.terrain;
            break;
          case 4:
            type = MapType.hybrid;
            break;
        }
      }

    /*} else {
      print("is OTHEER");
      type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid;
    }*/


    //MapType type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid;
    return Stack(
      children: [
        Center(
          child: mapBox.MapWidget(
            key: ValueKey("mapWidget"),
            styleUri: mapBox.MapboxStyles.STANDARD, // TODO update // widget.mapDTO!.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())!: MapType.hybrid,
            onMapCreated: (maBoxMap) {
              _onMapCreated(maBoxMap, mapContext);
            },
            onTapListener: (listener) {
              // close on tap
              mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', contents: null, description: ''));
            },
            cameraOptions: mapBox.CameraOptions(
                center: mapBox.Point(coordinates: mapBox.Position(4.865105, 50.465503)).toJson(), //TODO add element in manager // MDLF 50.416639, 4.879169 / Namur 50.465503, 4.865105
                zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 12),
          )
        ),
        Positioned(
            bottom: 35,
            left: 10,
            child: SizedBox(
              width: size.width * 0.55,
              child: MultiSelectContainer(
                label: null,
                color: kBackgroundGrey,
                initialValue: selectedCategories!,
                isMultiple: true,
                values: widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList(),
                onChanged: (value) {
                  var tempOutput = new List<String>.from(value);
                  print(tempOutput);
                  if(init) {
                    setState(() {
                      selectedCategories = tempOutput;
                      pointsToShow = widget.mapDTO!.points!.where((point) => tempOutput.any((tps) => point.categorie?.label?.firstWhere((lab) => lab.language == widget.language).value == tps) || point.categorie == null).toList();
                      //markers = getMarkers(widget.language, mapContext);
                      pointAnnotationManager!.deleteAll();
                      mapContext.notifyListeners();
                    });
                  }
                },
              ),
            ),
        ),
      ],
    );
  }

}