import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_animations/flutter_map_animations.dart';
import 'package:flutter_map_supercluster/flutter_map_supercluster.dart';
import 'package:latlong2/latlong.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
}

class MapScreen extends StatefulWidget {
  const MapScreen({Key? key}) : super(key: key);

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> with TickerProviderStateMixin {
  late List _stations = [];
  late final List<Marker> markers;
  late final SuperclusterImmutableController _superclusterController;
  late final AnimatedMapController _animatedMapController;

  @override
  void initState() {
    super.initState();
    _superclusterController = SuperclusterImmutableController();
    _animatedMapController = AnimatedMapController(vsync: this);

    markers = [];

    for (var i = 0; i < _stations.length; i++) {
      final latLng =
          LatLng(double.parse(_stations[i][4]), double.parse(_stations[i][5]));

      markers.add(
        Marker(
          anchorPos: AnchorPos.align(AnchorAlign.top),
          rotateAlignment: AnchorAlign.top.rotationAlignment,
          height: 30,
          width: 30,
          point: latLng,
          builder: (ctx) => const Icon(Icons.pin_drop),
        ),
      );
    }
  }

  Future<void> _getStations() async {
    final String stationFile =
        await rootBundle.loadString("assets/data/stations.json");
    final data = await json.decode(stationFile);

    setState(() {
      _stations = data["records"];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.more_vert),
            onPressed: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text('More')));
            },
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () => {print("deez")}, child: const Icon(Icons.add)),
      body: FlutterMap(
        mapController: _animatedMapController.mapController,
        options: MapOptions(
          // center: LatLng((maxLatLng.latitude + minLatLng.latitude) / 2,
          //    (maxLatLng.longitude + minLatLng.longitude) / 2),
          zoom: 6,
          maxZoom: 15,
        ),
        nonRotatedChildren: [
          Builder(
            builder: (context) =>
                Text(FlutterMapState.maybeOf(context)!.zoom.toString()),
          )
        ],
        children: <Widget>[
          TileLayer(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: const ['a', 'b', 'c'],
          ),
          SuperclusterLayer.immutable(
            initialMarkers: markers,
            indexBuilder: IndexBuilders.computeWithOriginalMarkers,
            controller: _superclusterController,
            moveMap: (center, zoom) => _animatedMapController.animateTo(
              dest: center,
              zoom: zoom,
            ),
            calculateAggregatedClusterData: true,
            clusterWidgetSize: const Size(40, 40),
            anchor: AnchorPos.align(AnchorAlign.center),
            popupOptions: PopupOptions(
              selectedMarkerBuilder: (context, marker) => const Icon(
                Icons.pin_drop,
                color: Colors.red,
              ),
              popupDisplayOptions: PopupDisplayOptions(
                builder: (BuildContext context, Marker marker) => Container(
                  color: Colors.white,
                  child: Text(marker.point.toString()),
                ),
              ),
            ),
            builder: (context, position, markerCount, extraClusterData) {
              return Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20.0),
                    color: Colors.blue),
                child: Center(
                  child: Text(
                    markerCount.toString(),
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}