import 'dart:async';

import 'package:animated_toggle_switch/animated_toggle_switch.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:stadtbote/tools/util.dart';

import '../model/job_tour.dart';

showMapPopup(BuildContext context, JobTour currentTour, List<JobTour> tourList) async {
  await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
            contentPadding: EdgeInsets.zero,
            shadowColor: Colors.transparent,
            backgroundColor: Colors.white,
            content: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
              var mapController = MapController();
              Map<int, StreamController<bool>> streamController = {};

              List<Widget> tourWidgets = [];
              for (JobTour tour in tourList) {
                var currentStreamController = StreamController<bool>();
                streamController[tour.sort] = currentStreamController;

                tourWidgets.add(
                  GestureDetector(
                    onTap: () async {
                      if (tour.pos != null) {
                        mapController.move(LatLng(tour.pos!.lat, tour.pos!.long), mapController.zoom);

                        streamController[currentTour.sort]!.sink.add(false);

                        currentTour = tour;
                        streamController[tour.sort]!.sink.add(true);
                      } else {
                        showAlertDialog('Information', 'Es liegt keine Position für diese Station vor');
                      }
                    },
                    child: SizedBox(
                      width: 70,
                      height: 80,
                      child: Column(
                        children: [
                          Container(
                            height: 50,
                            width: 70,
                            color: Colors.transparent,
                            child: const Icon(
                              Icons.person_pin_circle,
                              color: Colors.blue,
                              size: 56,
                            ),
                          ),
                          const SizedBox(height: 2),
                          SizedBox(
                            height: 12.0,
                            width: 70,
                            child: Text(
                              "Station ${tour.sort}",
                              softWrap: true,
                              textAlign: TextAlign.center,
                              style: const TextStyle(
                                color: Colors.black,
                                fontSize: 10.0,
                              ),
                            ),
                          ),
                          StreamBuilder<bool>(
                              stream: currentStreamController.stream,
                              builder: (context, snapshot) {
                                bool tourSelected = tour.sort == currentTour.sort;
                                if (snapshot.hasData) {
                                  tourSelected = snapshot.data as bool;
                                }

                                return Container(
                                  height: 2,
                                  color: tourSelected ? Colors.green : Colors.transparent,
                                );
                              }),
                        ],
                      ),
                    ),
                  ),
                );
              }

              final ValueNotifier<bool> valueNotifier = ValueNotifier<bool>(true);

              List<Marker> markers = [];
              for (var tour in tourList) {
                if (tour.pos != null) {
                  markers.add(Marker(
                      builder: (context) => const Icon(Icons.person_pin_circle, size: 56, color: Colors.blue),
                      point: LatLng(tour.pos!.lat, tour.pos!.long)));
                }
              }

              return Container(
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
                  key: GlobalKey(),
                  height: MediaQuery.of(context).size.height * 0.6,
                  child: Container(
                    height: 100,
                    width: MediaQuery.of(context).size.width * 1,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.white,
                      border: Border.all(
                        color: Colors.grey,
                        width: 0.5,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: [
                          SizedBox(
                              height: 80,
                              child: SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: tourWidgets,
                                ),
                              )),
                          Row(
                            children: [
                              Expanded(
                                child: ValueListenableBuilder<bool>(
                                  valueListenable: valueNotifier,
                                  builder: (context, value, child) {
                                    return AnimatedToggleSwitch<bool>.dual(
                                      current: value,
                                      first: true,
                                      second: false,
                                      dif: 0.0,
                                      borderColor: Colors.transparent,
                                      borderWidth: 5.0,
                                      height: 25,
                                      boxShadow: const [
                                        BoxShadow(
                                          color: Colors.black26,
                                          spreadRadius: 1,
                                          blurRadius: 2,
                                          offset: Offset(0, 1.5),
                                        ),
                                      ],
                                      onChanged: (b) {
                                        valueNotifier.value = b;
                                        mapController.move(mapController.center, b ? 14.0 : 16.0);
                                      },
                                      colorBuilder: (b) => b ? Colors.red : Colors.green,
                                      textBuilder: (value) => value ? const Center(child: Text('Fern')) : const Center(child: Text('Nah')),
                                    );
                                  },
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 10),
                          Expanded(
                            child: AbsorbPointer(
                              absorbing: true,
                              child: FlutterMap(
                                mapController: mapController,
                                options: MapOptions(
                                  center: LatLng(currentTour.pos!.lat, currentTour.pos!.long),
                                  zoom: 14,
                                ),
                                children: [
                                  TileLayer(
                                    urlTemplate: 'https://google-maps.assecutor.de/vt/lyrs=m@130&hl=en&x={x}&y={y}&z={z}',
                                    userAgentPackageName: 'com.example.app',
                                  ),
                                  MarkerLayer(
                                    markers: markers,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ));
            }));
      });
}