import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:anyway/structs/landmark.dart';
import 'package:anyway/structs/trip.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:the_widget_marker/the_widget_marker.dart';

class MapWidget extends StatefulWidget {

  final Future<Trip>? trip;

  MapWidget({
    this.trip
  });

  @override
  State<MapWidget> createState() => _MapWidgetState();
}

class _MapWidgetState extends State<MapWidget> {
  late GoogleMapController mapController;
  // coordinates of Paris
  CameraPosition _cameraPosition = CameraPosition(
    target: LatLng(48.8566, 2.3522),
    zoom: 11.0,
  );
  Set<Marker> markers = <Marker>{};
  final GlobalKey globalKey = GlobalKey();
  

  void _onMapCreated(GoogleMapController controller) async {
    mapController = controller;
    Trip? trip = await widget.trip;
    List<double>? newLocation = trip?.landmarks.first.location;
    if (newLocation != null) {
      CameraUpdate update = CameraUpdate.newLatLng(LatLng(newLocation[0], newLocation[1]));
      controller.moveCamera(update);
    }
    drawLandmarks();
  }


  void _onCameraIdle() {
    // print(mapController.getLatLng(ScreenCoordinate(x: 0, y: 0)));
  }


  void drawLandmarks() async {
    // (re)draws landmarks on the map
    Trip? trip = await widget.trip;
    LinkedList<Landmark>? landmarks = trip?.landmarks;
    if (landmarks != null){
      for (Landmark landmark in landmarks) {
        markers.add(Marker(
          markerId: MarkerId(landmark.name),
          position: LatLng(landmark.location[0], landmark.location[1]),
          // infoWindow: InfoWindow(title: landmark.name, snippet: landmark.type.name),
          icon: await MarkerIcon.widgetToIcon(globalKey),
        ));
      }
      setState(() {});
    }
  }


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        MyMarker(globalKey),

        GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: _cameraPosition,
              onCameraIdle: _onCameraIdle,
              // onLongPress: ,
              markers: markers,
              cloudMapId: '41c21ac9b81dbfd8',
            )
      ]
    );
  }
}


class MyMarker extends StatelessWidget {
  // declare a global key and get it trough Constructor

  MyMarker(this.globalKeyMyWidget);
  final GlobalKey globalKeyMyWidget;

  @override
  Widget build(BuildContext context) {
    // This returns an outlined circle, with an icon corresponding to the landmark type
    // As a small dot, the number of the landmark is displayed in the top right
    return RepaintBoundary(
      key: globalKeyMyWidget,
      child: Stack(
        children: [
          Container(
            width: 75,
            height: 75,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Colors.red, Colors.yellow]
              ),
              shape: BoxShape.circle,
              border: Border.all(color: Colors.black, width: 5),
            ),
            child: Icon(Icons.location_on, color: Colors.black, size: 50),
          ),
          Positioned(
            top: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.all(5),
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                shape: BoxShape.circle,
              ),
              child: Text('1', style: TextStyle(color: Colors.white, fontSize: 20)),
            ),
          ),
        ],
      ),
    );
  }
}