import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

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

  @override
  Widget build(BuildContext context) {
    return SlidingUpPanel(
        //header: Text("header"),
        minHeight: 55,
        footer: Text("footer"),
        //isDraggable: true,
        backdropTapClosesPanel: true,
        parallaxEnabled: true,
        parallaxOffset: 0.6,
        borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
        backdropEnabled: true,
        backdropOpacity: 0.2,
        controller: rogController.panelController,
        collapsed: CollapsedWidget(addIncident : addlocation),
        panelBuilder:(sc) => _scrollingList(sc),
        body: Center(
          child: Obx((() => 
            FlutterMap(
              mapController: rogController.mapController,
              options: MapOptions(
                center: LatLng(8, 80),
                zoom: 8,
              ),
              nonRotatedChildren: [
                //Center(
                  // child: Image(
                  //     image: AssetImage('assets/icons/crosshair.512x512.png'),
                  //     width: 35,
                  //     height: 35,
                  //   ),
                  // ),
              ],
              children: [
                TileLayer(
                  urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                ),
                MarkerLayer(
                  markers: rogController.locations.map((l) {
                            return Marker(
                              anchorPos: AnchorPos.align(AnchorAlign.center),
                              height: 70.0,
                              width: 70.0,
                              point: LatLng(l.latitude!, l.longitude!),
                              builder: (ctx){
                                return IconButton(
                                    onPressed: () {
                                      Location? loc = rogController.getIncidentForLatLong(l.latitude!, l.longitude!);
                                      if(loc != null){
                                        rogController.currentLocation.value = loc.toMap();
                                        rogController.panelController.open();
                                      }
                                    }, 
                                    icon: Icon(Icons.pin_drop, size: 38, color: Colors.red,)
                                  );
                              },
                            );
                          }).toList(),
                )
              ],
            )
          )),
        ),
      );
  }
}