import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:ride/constant/colors.dart';
import 'package:ride/controller/home/map_page_controller.dart';

class MapPage extends StatelessWidget {
  const MapPage({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(MapController());
    return Scaffold(
      body: GetBuilder<MapController>(
        builder: (controller) => Stack(
          children: [
            GoogleMap(
              onMapCreated: controller.onMapCreated,
              cameraTargetBounds: CameraTargetBounds(controller.boundsdata),
              minMaxZoomPreference: const MinMaxZoomPreference(12, 18),
              onLongPress: (argument) {
                Get.defaultDialog(
                  title: 'Are you want to go to this site',
                  content: Column(
                    children: [
                      Text('${argument.latitude},${argument.longitude}'),
                    ],
                  ),
                  onConfirm: () {
                    controller.clearpolyline();
                    controller.getMap('32.111946, 36.067396',
                        '${argument.latitude.toString()},${argument.longitude.toString()}');

                    Get.back();
                    controller.bottomSheet();
                  },
                );
              },
              onTap: (argument) {
                controller.hidePlaces();
                controller.bottomSheet();
              },
              initialCameraPosition: CameraPosition(
                target: controller.mylocation,
                zoom: 15,
              ),
              markers: {
                Marker(
                  markerId: const MarkerId('MyLocation'),
                  position: controller.mylocation,
                  draggable: true,
                  icon: controller.markerIcon,
                  onDragEnd: (value) {
                    print(value);
                  },
                  infoWindow: const InfoWindow(title: 'my location'),
                ),
                Marker(
                    markerId: const MarkerId('destination'),
                    position: controller.mydestination),
              },
              polylines: {
                Polyline(
                  polylineId: const PolylineId('route'),
                  points: controller.polylineCoordinates,
                  color: AppColor.primaryColor,
                  width: 3,
                )
              },
              mapType: MapType.normal,
              myLocationButtonEnabled: true,
              indoorViewEnabled: true,
              trafficEnabled: true,
            ),
            Positioned(
              top: 10,
              left: 0,
              right: 0,
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16),
                    child: Container(
                      decoration:
                          const BoxDecoration(color: AppColor.secondaryColor),
                      child: TextField(
                        decoration: const InputDecoration(
                            suffixIcon: Icon(Icons.search)),
                        controller: controller.placeController,
                        onChanged: (value) {
                          if (controller.placeController.text.length > 6) {
                            controller.getPlaces();
                            controller.changeHeight();
                          }
                        },
                        // onEditingComplete: () => controller.changeHeight(),
                      ),
                    ),
                  ),
                  Container(
                    height:
                        controller.places.isNotEmpty ? controller.height : 0,
                    color: AppColor.secondaryColor,
                    child: ListView.builder(
                      itemCount: controller.places.length,
                      itemBuilder: (BuildContext context, int index) {
                        var res = controller.places[index];
                        return TextButton(
                          onPressed: () {
                            controller.changeHeight();
                            Get.defaultDialog(
                              title: 'Are You sure to ride to ${res['name']}',
                              middleText: '',
                              onConfirm: () {
                                controller.getMap(
                                    '${controller.mylocation.latitude.toString()},${controller.mylocation.longitude.toString()}',
                                    "${res['geometry']['location']['lat']},${res['geometry']['location']['lng']}");
                                controller.places = [];
                                Get.back();
                              },
                            );
                          },
                          child: Text(
                            res['name'].toString(),
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}