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';
import 'package:ride/views/home/map_widget.dart/cancel_raide_page.dart';
import 'package:ride/views/widgets/circle_container.dart';
import 'package:ride/views/widgets/mycircular.dart';

import '../../controller/functions/toast.dart';
import '../../controller/home/menu_controller.dart';
import 'map_widget.dart/buttom_sheet_map_show.dart';
import 'map_widget.dart/cash_confirm_bottom_page.dart';
import 'map_widget.dart/main_bottom_Menu_map.dart';
import 'map_widget.dart/map_menu_widget.dart';
import 'map_widget.dart/menu_map_page.dart';
import 'map_widget.dart/payment_method.page.dart';
import 'map_widget.dart/picker_animation_container.dart';

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

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

                          Get.back();
                          controller.bottomSheet();
                          controller.showBottomSheet1();
                          //
                        },
                      );
                    },

                    onTap: (argument) {
                      controller.hidePlaces();

                      controller.changeButtomSheetShown();
                      // controller.bottomSheet();
                    },
                    initialCameraPosition: CameraPosition(
                      target: controller.mylocation,
                      zoom: 15,
                    ),
                    markers: {
                      for (var carLocation
                          in controller.carsLocationByPassenger)
                        Marker(
                            // anchor: const Offset(4, 4),
                            position: carLocation,
                            icon: controller.carIcon,
                            markerId: MarkerId(carLocation.toString())),
                      Marker(
                        markerId: MarkerId('MyLocation'.tr),
                        position: controller.mylocation,
                        draggable: true,
                        icon: controller.markerIcon,
                        onDragEnd: (value) {
                          print(value);
                        },
                        infoWindow: InfoWindow(title: 'my location'.tr),
                      ),
                      Marker(
                        markerId: MarkerId('Target'.tr),
                        position: controller.mydestination,
                        draggable: true,
                        onDragEnd: (v) {
                          print(v);
                        },
                      ),
                    },
                    polylines: {
                      Polyline(
                        zIndex: 2,
                        consumeTapEvents: true,
                        geodesic: true,
                        endCap: Cap.buttCap,
                        startCap: Cap.buttCap,
                        visible: true,
                        polylineId: const PolylineId('route'),
                        points: controller.polylineCoordinates,
                        color: AppColor.primaryColor,
                        width: 5,
                      ),
                      // Polyline(
                      //   zIndex: 2,
                      //   consumeTapEvents: true,
                      //   geodesic: true,
                      //   endCap: Cap.buttCap,
                      //   startCap: Cap.buttCap,
                      //   visible: true,
                      //   polylineId: PolylineId('g'),
                      //   points: [
                      //     LatLng(controller.southwest.latitude,
                      //         controller.southwest.longitude),
                      //     LatLng(controller.northeast.latitude,
                      //         controller.northeast.longitude)
                      //   ],
                      //   color: AppColor.primaryColor,
                      //   width: 5,
                      // ),
                    },
                    // circles: {
                    //   Circle(
                    //       circleId: const CircleId('kk'),
                    //       center: controller.mylocation,
                    //       radius: 60,
                    //       fillColor: AppColor.primaryColor,)
                    // },
                    mapType:
                        controller.mapType ? MapType.satellite : MapType.normal,
                    myLocationButtonEnabled: true,
                    indoorViewEnabled: true,
                    trafficEnabled: false,
                    buildingsEnabled: true,
                    mapToolbarEnabled: true,
                    onCameraMove: (position) {
                      controller.newMylocation = position.target;
                      // print('my' + controller.mylocation.toString());
                      // print('new' + controller.newMylocation.toString());
                    },
                    myLocationEnabled: true,
                    // liteModeEnabled: true,
                  ),
          ),
          GetBuilder<MapController>(
            builder: (controller) => Positioned(
                top: 80,
                left: 6,
                child: IconButton(
                  onPressed: () {
                    controller.changeMapType();
                    // Toast.show(context, 'This is a toast message!');
                  },
                  icon: const Icon(
                    Icons.satellite_alt,
                    size: 35,
                  ),
                )),
          ),
          const PickerIconOnMap(),
          // PickerAnimtionContainerFormPlaces(),
          const MainBottomMenuMap(),
          const MapMenuWidget(),
          const MenuIconMapPageWidget(),
          buttomSheetMapPage(),
          cancelRidePage(),
          GetBuilder<MapController>(
              builder: (controller) => controller.data.isNotEmpty
                  ? Positioned(
                      right: 5,
                      top: 55,
                      child: GestureDetector(
                        onTap: () {
                          controller.changeCancelRidePageShow();
                        },
                        child: const Icon(
                          Icons.clear,
                          size: 30,
                        ),
                      ))
                  : const SizedBox()),
          const CashConfirmPageShown(),
          const PaymentMethodPage()
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MapController>(
        builder: (controller) => Positioned(
              bottom: 0,
              top: 0,
              left: 0,
              right: 0,
              child: controller.isPickerShown
                  ? const Icon(
                      Icons.add_location,
                      color: Colors.purple,
                    )
                  : const SizedBox(),
            ));
  }
}