import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../marker_data.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

class MapContainerWidget extends StatelessWidget {
  final List<MarkerTemplate> markerList;

  const MapContainerWidget({super.key, required this.markerList});

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery
        .of(context)
        .size
        .width;
    double boxWidth = 0.9;
    double boxHeight = 1.5;

    return Container(
      width: screenWidth * boxWidth,
      height: screenWidth * boxHeight,
      color: Colors.blue,
      child: FlutterMap(
        options: MapOptions(
          center: LatLng(60.7666, 10.8471),
          zoom: 9.0,
        ),
        children: [
          TileLayer(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: const ['a', 'b', 'c'],
          ),
          MarkerLayer(
            markers: markerList.map((MarkerTemplate markerTemplate) {
              return Marker(
                width: markerTemplate.size,
                height: markerTemplate.size,
                point: markerTemplate.location,
                builder: (ctx) =>
                    GestureDetector(
                      onTap: () {
                        // NB: temporary print
                        print('Icon tapped');
                        // NB: trigger function to add contents to the next box
                      },
                      child: Image.asset(
                        'assets/icons/circle-red.png',
                        // Path to your custom icon asset
                        color: markerTemplate.color,
                        width: markerTemplate.size,
                        height: markerTemplate.size,
                      ),
                    ),
              );
            }).toList(),
          ),
          /*PolygonLayer(
                        polygons: [
                          Polygon(
                            points: [
                              LatLng(60.7600, 10.8000),
                              LatLng(60.7600, 11.0000),
                              LatLng(60.7000, 11.0000),
                              LatLng(60.7000, 10.8000),
                            ],
                            color: Colors.blue,
                            isFilled: true,
                          ),
                        ],
                      ),*/
        ],
      ),
    );
  }
}