import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:flutter_map_polygon_editor/polygon_editor.dart';
import 'package:get/get.dart';
import 'package:latlong2/latlong.dart';
import 'package:terepi_seged/pages/field_trip/presentations/controllers/field_trip_controller.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      extendBody: true,
      appBar: AppBar(
          title: const Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Terepbejárás'),
        ],
      )),
      body: Column(
        children: [
          Expanded(
              child: Stack(children: [
            Obx(() => controller.mapIsInitialized.value
                ? FlutterMap(
                    mapController: controller.mapController,
                    options: controller.mapOptions,
                    children: [
                      TileLayer(
                        urlTemplate:
                            'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
                        subdomains: const ['mt0', 'mt1', 'mt2', 'mt3'],
                        maxNativeZoom: 18,
                      ),
                      CurrentLocationLayer(
                        alignPositionOnUpdate: AlignOnUpdate.once,
                      ),
                      MarkerLayer(markers: controller.pointNotes),
                      PolylineLayer(
                        polylines: controller.polylineNotes,
                      ),
                      PolygonLayer(
                        polygons: controller.polygonNotes,
                        useAltRendering: true,
                      ),
                      // PolylineLayer(polylines: [
                      //   Polyline(
                      //     points: [
                      //       const LatLng(47.65, 19.00),
                      //       const LatLng(47.64, 19.02),
                      //       const LatLng(47.69, 19.22),
                      //     ],
                      //     strokeWidth: 8,
                      //     color: const Color(0xFF60399E),
                      //     hitValue: (
                      //       title: 'Purple Line',
                      //       subtitle: 'Nothing really special here...',
                      //     ),
                      //   ),
                      // ]),
                      PolygonEditor(
                          controller: controller.polygonEditorController,
                          throttleDuration: Duration.zero)
                    ],
                  )
                : const Center(child: CircularProgressIndicator())),
            Positioned(
                bottom: 3,
                right: 3,
                child: Row(
                  children: [
                    IconButton.filled(
                        iconSize: 32,
                        onPressed: () {
                          controller.startPointEdition();
                        },
                        icon: const Icon(Icons.flag)),
                    IconButton.filled(
                        iconSize: 32,
                        onPressed: () {
                          controller.startPolylineEdition();
                        },
                        icon: const Icon(Icons.polyline)),
                    IconButton.filled(
                        iconSize: 32,
                        onPressed: () {
                          controller.startPolygonEdition();
                        },
                        icon: const Icon(Icons.border_outer)),
                    IconButton.filled(
                        iconSize: 32,
                        onPressed: () {
                          controller.saveNote();
                        },
                        icon: const Icon(Icons.done)),
                    IconButton.filled(
                        iconSize: 32,
                        onPressed: () {
                          controller.cancelEditorController();
                        },
                        icon: const Icon(Icons.cancel))
                  ],
                ))
          ]))
        ],
      ),
    );
  }
}