import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:geojson/geojson.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:latlong2/latlong.dart';
import 'package:rogapp/pages/drawer/drawer_page.dart';
import 'package:rogapp/pages/home/home_controller.dart';
import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:rogapp/routes/app_pages.dart';
import 'package:rogapp/widgets/base_layer_widget.dart';
import 'package:rogapp/widgets/bottom_sheet_widget.dart';
import 'package:rogapp/widgets/perfecture_widget.dart';


class MapPage extends StatelessWidget {
  MapPage({ Key? key }) : super(key: key);

  final HomeController homeController = Get.find<HomeController>();

  final MapController mapController = MapController();

  @override
  Widget build(BuildContext context) {
    final PopupController _popupController = PopupController();


    return Scaffold(
      drawer: DrawerPage(),
      appBar: AppBar(
        title: Text("app_title".tr),
        actions: [
          IconButton(
            icon: const Icon(Icons.map),
            onPressed: () => {print("action")},
          )

        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(child: IconButton(icon: Icon(Icons.camera_enhance), onPressed: (){},),),
            Expanded(child: new Text('')),
            Expanded(child: IconButton(icon: Icon(Icons.travel_explore), onPressed: (){}),),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: (){
          Get.toNamed(AppPages.INITIAL);
        },
        tooltip: 'Increment',
        child: new Icon(Icons.document_scanner),
        elevation: 4.0,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: SafeArea(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              height: 50.0,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: BreadCrumb(
                  items: <BreadCrumbItem>[
                    BreadCrumbItem(content:
                     //Text('Item1', style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),)
                     PerfectureWidget(),
                    ),
                                BreadCrumbItem(content: Text('Item2', style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),)),
                  ],
                  divider: Icon(Icons.chevron_right),
                ),
              ),
            ),
            Expanded(
              child: Obx(() => 
                Stack(
                  children: [
                    FlutterMap(
                      mapController: mapController,
                      options: MapOptions(
                          center: LatLng(37.15319600454702, 139.58765950528198),
                          zoom: 6,
                          maxZoom: 20,
                          plugins: [
                            MarkerClusterPlugin(),
                          ],
                          onTap: (_, __) =>
                              _popupController
                                  .hideAllPopups(), // Hide popup when the map is tapped.
                        ),
                        children: [
                          BaseLayer(),
                          LocationMarkerLayerWidget(),
                          homeController.locations.length > 0 ?
                          MarkerClusterLayerWidget(
                            options: MarkerClusterLayerOptions(
                              spiderfyCircleRadius: 80,
                              spiderfySpiralDistanceMultiplier: 2,
                              circleSpiralSwitchover: 12,
                              maxClusterRadius: 20,
                              rotate: true,
                              onMarkerTap: (marker){
                                GeoJsonFeature? fs = homeController.getFeatureForLatLong(marker.point.latitude, marker.point.longitude);
                                print(fs);
                                if(fs != null){
                                  if(homeController.currentFeature.length > 0) {
                                    homeController.currentFeature.clear();
                                  }
                                  homeController.currentFeature.add(fs);
            
                                  showModalBottomSheet(context: context, isScrollControlled: true, 
                                    builder:((context) => BottomSheetWidget())
                                  );
                                }
                              },
            
                              size: Size(40, 40),
                              anchor: AnchorPos.align(AnchorAlign.center),
                              fitBoundsOptions: const FitBoundsOptions(
                                padding: EdgeInsets.all(50),
                                maxZoom: 15,
                              ),
                              markers:homeController.locations[0].collection.map((i) {
                                GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
                                return Marker(
                                  anchorPos: AnchorPos.align(AnchorAlign.center),
                                  height: 70.0,
                                  width: 70.0,
                                  point: LatLng(p.geoSerie!.geoPoints[0].latitude, p.geoSerie!.geoPoints[0].longitude),
                                  builder: (ctx) => Icon(Icons.pin_drop),
                                );
                              }).toList(),
                              builder: (context, markers) {
                                return Container(
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(20.0),
                                      color: Colors.blue),
                                  child: Center(
                                    child: Text(
                                      markers.length.toString(),
                                      style: TextStyle(color: Colors.white),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ): Container(height:0,width: 0),
                        ],
                    )
                  ],
                )
              ),
            ),
          ],
        ),
      ),
    );
  }
}