Fondex/lib/widget/osm_map/map_picker_page.dart

import 'dart:developer';

import 'package:customer/themes/app_them_data.dart';
import 'package:customer/themes/round_button_fill.dart';
import 'package:customer/widget/osm_map/map_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:latlong2/latlong.dart';
import '../../controllers/theme_controller.dart';

class MapPickerPage extends StatelessWidget {
  final OSMMapController controller = Get.put(OSMMapController());
  final TextEditingController searchController = TextEditingController();

  MapPickerPage({super.key});

  @override
  Widget build(BuildContext context) {
    final themeController = Get.find<ThemeController>();
    final isDark = themeController.isDark.value;
    return Scaffold(
      // appBar: AppBar(
      //   backgroundColor:
      //       isDark ? AppThemeData.surfaceDark : AppThemeData.surface,
      //   centerTitle: false,
      //   titleSpacing: 0,
      //   title: Text(
      //     "PickUp Location".tr,
      //     textAlign: TextAlign.start,
      //     style: TextStyle(
      //       fontFamily: AppThemeData.medium,
      //       fontSize: 16,
      //       color: isDark ? AppThemeData.grey50 : AppThemeData.grey900,
      //     ),
      //   ),
      // ),
      body: Stack(
        children: [
          Obx(
            () => FlutterMap(
              mapController: controller.mapController,
              options: MapOptions(
                initialCenter:
                    controller.pickedPlace.value?.coordinates ??
                    LatLng(20.5937, 78.9629), // Default India center
                initialZoom: 13,
                onTap: (tapPos, latlng) {
                  controller.addLatLngOnly(latlng);
                  controller.mapController.move(
                    latlng,
                    controller.mapController.camera.zoom,
                  );
                },
              ),
              children: [
                TileLayer(
                  urlTemplate:
                      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                  subdomains: const ['a', 'b', 'c'],
                  userAgentPackageName: 'com.emart.app',
                ),
                MarkerLayer(
                  markers:
                      controller.pickedPlace.value != null
                          ? [
                            Marker(
                              point: controller.pickedPlace.value!.coordinates,
                              width: 40,
                              height: 40,
                              child: const Icon(
                                Icons.location_pin,
                                size: 36,
                                color: Colors.red,
                              ),
                            ),
                          ]
                          : [],
                ),
              ],
            ),
          ),
          Positioned(
            top: MediaQuery.of(context).size.height / 9,
            left: 16,
            right: 16,
            child: Column(
              children: [
                Material(
                  elevation: 4,
                  borderRadius: BorderRadius.circular(8),
                  child: TextField(
                    controller: searchController,
                    style: TextStyle(
                      color:
                          isDark ? AppThemeData.grey900 : AppThemeData.grey900,
                    ),
                    decoration: InputDecoration(
                      hintText: 'Search location...'.tr,
                      hintStyle: TextStyle(
                        color:
                            isDark
                                ? AppThemeData.grey900
                                : AppThemeData.grey900,
                      ),
                      contentPadding: EdgeInsets.all(12),
                      border: InputBorder.none,
                      prefixIcon: Icon(Icons.search),
                    ),
                    onChanged: controller.searchPlace,
                  ),
                ),
                Obx(() {
                  if (controller.searchResults.isEmpty) {
                    return const SizedBox.shrink();
                  }
                  return Container(
                    margin: const EdgeInsets.only(top: 4),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: controller.searchResults.length,
                      itemBuilder: (context, index) {
                        final place = controller.searchResults[index];
                        return ListTile(
                          title: Text(place['display_name']),
                          onTap: () {
                            controller.selectSearchResult(place);
                            final lat = double.parse(place['lat']);
                            final lon = double.parse(place['lon']);
                            final pos = LatLng(lat, lon);
                            controller.mapController.move(pos, 15);
                            searchController.text = place['display_name'];
                          },
                        );
                      },
                    ),
                  );
                }),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: Obx(() {
        return Container(
          padding: const EdgeInsets.all(16),
          color: Colors.white,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                controller.pickedPlace.value != null
                    ? "Picked Location:".tr
                    : "No Location Picked".tr,
                style: AppThemeData.boldTextStyle(
                  color: AppThemeData.grey900,
                  fontSize: 17.sp,
                ),
              ),
              const SizedBox(height: 4),
              if (controller.pickedPlace.value != null)
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 2.0),
                  child: Text(
                    "${controller.pickedPlace.value!.address}\n(${controller.pickedPlace.value!.coordinates.latitude.toStringAsFixed(5)}, ${controller.pickedPlace.value!.coordinates.longitude.toStringAsFixed(5)})",
                    style: const TextStyle(fontSize: 13),
                  ),
                ),
              const SizedBox(height: 10),
              Row(
                children: [
                  Expanded(
                    child: RoundedButtonFill(
                      title: "Confirm Location".tr,
                      color: AppThemeData.mainColor,
                      textColor: AppThemeData.grey50,
                      height: 4.h,
                      onPress: () async {
                        final selected = controller.pickedPlace.value;
                        if (selected != null) {
                          Get.back(
                            result: selected,
                          ); // ✅ Return the selected place
                          log("Selected location: $selected");
                        }
                      },
                    ),
                  ),
                  SizedBox(width: 10.w),
                  IconButton(
                    icon: const Icon(Icons.delete_forever, color: Colors.red),
                    onPressed: controller.clearAll,
                  ),
                ],
              ),
            ],
          ),
        );
      }),
    );
  }
}