import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syncfusion_flutter_maps/maps.dart';
import 'package:terepi_seged/pages/map_test/presentation/controllers/map_test_controller.dart';

class MapTestView extends GetView<MapTestController> {
  const MapTestView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Obx(
          () => controller.isInitialized.value
              ? SfMaps(
                  layers: [
                    MapTileLayer(
                      urlTemplate:
                          'http://mt1.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
                      zoomPanBehavior: controller.zoomPanBehavior,
                      controller: controller.mapTileLayerController,
                      initialMarkersCount: 1,
                      markerBuilder: (BuildContext context, int index) {
                        return MapMarker(
                          latitude: controller.currentLatitude.value,
                          longitude: controller.currentLongitude.value,
                          size: const Size(20, 20),
                          child: const Icon(
                            Icons.location_on,
                            color: Colors.yellow,
                          ),
                        );
                      },
                      sublayers: [
                        // MapShapeSublayer(
                        //   source: controller.kozigSource,
                        //   showDataLabels: true,
                        //   dataLabelSettings: const MapDataLabelSettings(
                        //       textStyle: TextStyle(
                        //           color: Colors.red,
                        //           fontSize: 12,
                        //           fontWeight: FontWeight.normal,
                        //           fontFamily: 'Times')),
                        //   color: Colors.transparent,
                        //   strokeColor: Colors.red,
                        //   strokeWidth: 2,
                        // ),
                        MapShapeSublayer(
                          source: controller.mapSource,
                          showDataLabels: true,
                          dataLabelSettings: const MapDataLabelSettings(
                              textStyle: TextStyle(
                                  color: Colors.black,
                                  fontSize: 10,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: 'Times')),
                          // color: Colors.white38,
                          strokeColor: Colors.black,
                          strokeWidth: 2,
                        ),
                        MapPolylineLayer(
                            polylines: List<MapPolyline>.generate(
                                controller.lines2.length, (index) {
                          return MapPolyline(
                              points: controller.lines2[index],
                              color: Colors.purple,
                              width: 3);
                        }).toSet()),
                        MapPolylineLayer(
                            polylines: List<MapPolyline>.generate(
                                controller.lines2.length, (index) {
                          return MapPolyline(
                              points: controller.lines3[index],
                              color: Colors.yellow,
                              width: 3);
                        }).toSet()),
                        MapPolylineLayer(
                            polylines: List<MapPolyline>.generate(
                                controller.lines1.length, (index) {
                          return MapPolyline(
                              points: controller.lines1[index],
                              color: Colors.yellow,
                              width: 3);
                        }).toSet()),
                      ],
                    ),
                    // MapShapeLayer(
                    //   source: controller.mapSource,
                    //   showDataLabels: true,
                    //   dataLabelSettings: const MapDataLabelSettings(
                    //       textStyle: TextStyle(
                    //           color: Colors.black,
                    //           fontSize: 10,
                    //           fontWeight: FontWeight.bold,
                    //           fontFamily: 'Times')),
                    //   zoomPanBehavior: controller.zoomPanBehavior,
                    // )
                  ],
                )
              : const Center(child: CircularProgressIndicator()),
        ),
      ),
    );
  }
}