cloudsolutions-atoms/lib/modules/asset_tracking/map_tracking_page.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_geojson2/flutter_map_geojson2.dart';
import 'package:latlong2/latlong.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/helper/utils.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/new_views/common_widgets/multiple_item_drop_down_menu.dart';
import 'package:test_sa/new_views/common_widgets/single_item_drop_down_menu.dart';
import 'package:test_sa/providers/loading_list_notifier.dart';
import 'package:test_sa/views/widgets/item_views/info_text_widget.dart';

import 'asset_tracking_item_view.dart';
import 'asset_tracking_provider.dart';
import 'models/asset_tracking_model.dart';
import 'models/floor_map_model.dart';
import 'models/penguin_site_model.dart';

class MapTrackingPage extends StatefulWidget {
  final AssetTrackingModel? assetTrackingData;

  MapTrackingPage({Key? key, this.assetTrackingData}) : super(key: key);

  @override
  _MapTrackingPageState createState() {
    return _MapTrackingPageState();
  }
}

class _MapTrackingPageState extends State<MapTrackingPage> {
  final MapController mapController = MapController();
  late AssetTrackingProvider assetTrackingProvider;

  late bool inAppView;

  FloorMapModel? floorMapModel;
  Map<String, dynamic>? _geojson;
  List<Marker> markers = []; // move to provider

  LatLngBounds? _computedBounds;
  final ExpansibleController expansibleController = ExpansibleController();

  static const LatLng _fallbackCenter = LatLng(24.81200245073082, 46.624273601310186);

  @override
  void initState() {
    super.initState();
    inAppView = widget.assetTrackingData == null;
    assetTrackingProvider = Provider.of<AssetTrackingProvider>(context, listen: false);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!inAppView) {
        getFloorMap(widget.assetTrackingData!.location!.floor!.id!);
      } else {
        getPenguinSites();
      }
    });
  }

  void getPenguinSites() async {
    Utils.showLoading(context);
    await assetTrackingProvider.getPenguinSites();
    Utils.hideLoading(context);
  }

  void getPenguinBuildings(int id) async {
    Utils.showLoading(context);
    await assetTrackingProvider.getPenguinBuildings(id);
    Utils.hideLoading(context);
  }

  void getPenguinFloors(int id) async {
    Utils.showLoading(context);
    await assetTrackingProvider.getPenguinFloors(id);
    Utils.hideLoading(context);
  }

  void getFloorMap(int id) {
    Utils.showLoading(context);
    assetTrackingProvider.getFloorMap(id).then((floorMap) {
      Utils.hideLoading(context);
      _onFloorMapLoaded(floorMap);
    }).catchError((error) {
      Utils.hideLoading(context);
    });
  }

  void _onFloorMapLoaded(FloorMapModel? loadedFloorMap) {
    floorMapModel = loadedFloorMap;

    if (floorMapModel?.geojsonData == null) {
      setState(() {});
      return;
    }

    try {
      final decoded = floorMapModel!.geojsonData!;
      final bounds = _computeBoundsFromGeoJson(decoded);

      setState(() {
        _geojson = decoded;
        _computedBounds = bounds;
        markers = [
          Marker(
            point: LatLng(widget.assetTrackingData!.location!.latitude!, widget.assetTrackingData!.location!.longitude!),
            child: const Icon(Icons.location_pin, color: AppColor.red30),
          ),
        ];
      });

      WidgetsBinding.instance.addPostFrameCallback((_) {
        mapController.fitCamera(
          CameraFit.bounds(bounds: bounds, padding: const EdgeInsets.all(24)),
        );
      });
    } catch (e) {
      print('Failed to parse/compute bounds for floor geojson: $e');
      setState(() {}); // still show the map with whatever we have
    }
  }

  LatLngBounds _computeBoundsFromGeoJson(Map<String, dynamic> geojson) {
    final features = (geojson['features'] as List<dynamic>? ?? []);

    double? minLng, minLat, maxLng, maxLat;

    void visit(dynamic node) {
      if (node is List && node.isNotEmpty && node.first is num) {
        final lng = (node[0] as num).toDouble();
        final lat = (node[1] as num).toDouble();
        minLng = (minLng == null || lng < minLng!) ? lng : minLng;
        maxLng = (maxLng == null || lng > maxLng!) ? lng : maxLng;
        minLat = (minLat == null || lat < minLat!) ? lat : minLat;
        maxLat = (maxLat == null || lat > maxLat!) ? lat : maxLat;
      } else if (node is List) {
        for (final child in node) {
          visit(child);
        }
      }
    }

    for (final feature in features) {
      final geometry = feature['geometry'] as Map<String, dynamic>?;
      final coordinates = geometry?['coordinates'];
      if (coordinates == null) continue;
      visit(coordinates);
    }

    if (minLng == null || minLat == null || maxLng == null || maxLat == null) {
      throw StateError('No coordinates found in floor geojson — cannot compute bounds.');
    }

    return LatLngBounds(
      LatLng(minLat!, minLng!),
      LatLng(maxLat!, maxLng!),
    );
  }

  double _dragPosition = 0.5;
  late double _sheetPosition = _dragPosition;
  final minChildSize = 0.25;
  final maxChildSize = 1.0;

  @override
  Widget build(BuildContext context) {
    Widget mapWidget = FlutterMap(
      mapController: mapController,
      options: MapOptions(initialCenter: _fallbackCenter, initialZoom: 16.0),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          userAgentPackageName: 'com.hmg.atoms',
        ),
        if (_geojson != null) ...[
          GeoJsonLayer.memory(_geojson!, styleDefaults: GeoJsonStyleDefaults.leaflet),
          // if (!inAppView || )
          if (markers.isNotEmpty) MarkerLayer(markers: markers),
          if (inAppView)
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Selector<AssetTrackingProvider, List<AssetTrackingModel>>(
                  selector: (_, myModel) => myModel.assetsOnTheFloorList,
                  builder: (_, assetsOnTheFloorList, __) {
                    return assetsOnTheFloorList.isEmpty
                        ? const SizedBox()
                        : Container(
                            margin: const EdgeInsets.all(16),
                            padding: const EdgeInsets.only(right: 0, left: 0),
                            decoration: BoxDecoration(
                              color: AppColor.tabBarBackground(context),
                              border: Border.all(color: AppColor.tabBarBorder(context)),
                              borderRadius: BorderRadius.circular(20),
                            ),
                            child: UpwardExpansionTile(title: InfoTextLabelWidget(label: "${assetsOnTheFloorList.length} Assets found on this floor"), children: [
                              LimitedBox(
                                maxHeight: 120,
                                child: MultipleItemDropDownMenu<AssetTrackingModel, NullableLoadingProvider>(
                                  context: context,
                                  title: 'Assets on The Floor',
                                  hintMsg: 'Search By Label or Serial Number',
                                  initialValue: [],
                                  showShadow: false,
                                  staticData: assetsOnTheFloorList,
                                  showCancel: true,
                                  showAsFullScreenDialog: true,
                                  onSelect: (selectedAssets) {
                                    setState(() {
                                      markers = [
                                        for (var asset in selectedAssets!)
                                          Marker(
                                            point: LatLng(asset.location!.latitude!, asset.location!.longitude!),
                                            child: Tooltip(
                                              triggerMode: TooltipTriggerMode.tap,
                                              message: "Last seen: ${asset.location?.lastSeen?.toServiceRequestDetailsFormat}",
                                              child: const Icon(Icons.location_pin, color: AppColor.red30),
                                            ),
                                          ),
                                      ];
                                    });
                                    // markers
                                  },
                                ).paddingOnly(start: 16, end: 16, top: 16),
                              ),
                            ]),
                          );

                    // Column(
                    //         mainAxisSize: MainAxisSize.min,
                    //         children: [
                    //           Container(
                    //             width: 50.toScreenWidth,
                    //             height: 6.toScreenHeight,
                    //             decoration: BoxDecoration(color: AppColor.white50, borderRadius: BorderRadius.circular(30)),
                    //           ).center,
                    //           InfoTextLabelWidget(label: "There is ${assetsOnTheFloorList.length} assets on this floor"),
                    //         ],
                    //       ).bottomSheetContainer(context, padding: const EdgeInsets.all(16));
                  }),
            ),
        ]
      ],
    );

    return inAppView
        ? Stack(
            alignment: AlignmentDirectional.topCenter,
            children: [
              mapWidget,
              Container(
                margin: const EdgeInsets.all(16),
                padding: const EdgeInsets.only(right: 16, left: 16),
                decoration: BoxDecoration(
                  color: AppColor.tabBarBackground(context),
                  border: Border.all(color: AppColor.tabBarBorder(context)),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Theme(
                  data: ThemeData(splashColor: Colors.transparent, hoverColor: Colors.transparent, highlightColor: Colors.transparent),
                  child: Consumer<AssetTrackingProvider>(builder: (context, assetProvider, _) {
                    return ExpansionTile(
                      shape: Border.all(color: Colors.transparent, width: 0),
                      collapsedShape: Border.all(color: Colors.transparent, width: 0),
                      controller: expansibleController,
                      title: InfoTextLabelWidget(label: assetProvider.getExpansionHeader),
                      iconColor: AppColor.icon2Color(context),
                      collapsedIconColor: AppColor.icon2Color(context),
                      dense: true,
                      childrenPadding: const EdgeInsets.all(0),
                      tilePadding: const EdgeInsets.all(0),
                      children: <Widget>[
                        SingleItemDropDownMenu<PenguinSiteModel, NullableLoadingProvider>(
                          context: context,
                          title: "Select Site",
                          staticData: assetProvider.sitesList,
                          initialValue: assetProvider.selectedSite,
                          showShadow: false,
                          // backgroundColor: AppColor.fieldBgColor(context),
                          showAsBottomSheet: true,
                          onSelect: (value) {
                            if (value != null) {
                              assetProvider.selectedSite = value;
                              getPenguinBuildings(value.id!);
                            }
                          },
                        ),
                        4.height,
                        SingleItemDropDownMenu<PenguinSiteModel, NullableLoadingProvider>(
                          context: context,
                          title: "Select Building",
                          staticData: assetProvider.buildList,
                          initialValue: assetProvider.selectedBuilding,
                          showShadow: false,
                          enabled: assetProvider.selectedSite != null,
                          // backgroundColor: AppColor.fieldBgColor(context),
                          showAsBottomSheet: true,
                          onSelect: (value) {
                            if (value != null) {
                              assetProvider.selectedBuilding = value;
                              getPenguinFloors(value.id!);
                            }
                          },
                        ),
                        4.height,
                        SingleItemDropDownMenu<PenguinSiteModel, NullableLoadingProvider>(
                          context: context,
                          title: "Select Floor",
                          staticData: assetProvider.floorList,
                          initialValue: assetProvider.selectedFloor,
                          showShadow: false,
                          enabled: assetProvider.selectedBuilding != null,
                          // backgroundColor: AppColor.fieldBgColor(context),
                          showAsBottomSheet: true,
                          onSelect: (value) {
                            if (value != null) {
                              assetProvider.selectedFloor = value;
                              expansibleController.collapse();
                              getFloorMap(value.id!);
                              assetTrackingProvider.getAssetsFromPenguinByFloor();
                            }
                          },
                        ),
                        16.height,
                      ],
                    );
                  }),
                ),
              )
            ],
          )
        : Scaffold(appBar: const DefaultAppBar(title: "Live Asset Tracking"), body: mapWidget);
  }
}

class UpwardExpansionTile extends StatefulWidget {
  final Widget title;
  final List<Widget> children;

  const UpwardExpansionTile({Key? key, required this.title, required this.children}) : super(key: key);

  @override
  _UpwardExpansionTileState createState() => _UpwardExpansionTileState();
}

class _UpwardExpansionTileState extends State<UpwardExpansionTile> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // Expanded content appears ABOVE the title
        AnimatedCrossFade(
          firstChild: const SizedBox.shrink(),
          secondChild: Column(
            mainAxisSize: MainAxisSize.min,
            children: widget.children,
          ),
          crossFadeState: _isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          duration: const Duration(milliseconds: 200),
        ),
        // The clickable header/title sits at the bottom
        InkWell(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                widget.title,
                Icon(_isExpanded ? Icons.expand_less : Icons.expand_more),
              ],
            ),
          ),
        ),
      ],
    );
  }
}