import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_rx/src/rx_typedefs/rx_typedefs.dart';
import 'package:ride/constant/style.dart';
import 'package:ride/controller/home/profile/order_history_controller.dart';
import 'package:ride/views/home/my_wallet/passenger_wallet.dart';
import 'package:ride/views/home/profile/order_history.dart';
import 'package:ride/views/home/profile/promos_passenger_page.dart';

import '../../../constant/colors.dart';
import '../../../controller/home/map_page_controller.dart';
import '../../notification/notification_page.dart';
import '../../widgets/icon_widget_menu.dart';
import '../home_page.dart';
import '../profile/passenger_profile_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MapController>(
      builder: (controller) => Stack(children: [
        Positioned(
          right: 60,
          left: 60,
          child: Padding(
            padding: const EdgeInsets.only(right: 20),
            child: Opacity(
                alwaysIncludeSemantics: false,
                opacity: 1, // Adjust the opacity value as needed
                child: AnimatedContainer(
                  width: Get.width * .6,
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(12)),
                      color: AppColor.secondaryColor,
                      boxShadow: [
                        BoxShadow(
                            color: AppColor.accentColor,
                            offset: Offset(-3, -3),
                            blurRadius: 0,
                            spreadRadius: 0,
                            blurStyle: BlurStyle.outer),
                        BoxShadow(
                            color: AppColor.accentColor,
                            offset: Offset(3, 3),
                            blurRadius: 0,
                            spreadRadius: 0,
                            blurStyle: BlurStyle.outer)
                      ]),
                  transform: Matrix4.translationValues(
                      controller.heightMenu * .1, 1, 1),
                  curve: Curves.easeOutCubic,
                  clipBehavior: Clip.hardEdge,
                  duration: const Duration(milliseconds: 300),
                  height: controller.heightMenu,
                  child: controller.heightMenuBool
                      ? Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            IconWidgetMenu(
                                onpressed: () {
                                  Get.to(
                                    () => const NotificationPage(),
                                    transition: Transition.circularReveal,
                                  );
                                },
                                title: 'Notifications'.tr,
                                icon: Icons.notifications),
                            IconWidgetMenu(
                              onpressed: () {
                                Get.to(
                                  () => const PassengerProfilePage(),
                                  transition: Transition.zoom,
                                );
                              },
                              icon: Icons.person,
                              title: 'Profile'.tr,
                            ),
                            IconWidgetMenu(
                                title: 'Home'.tr,
                                onpressed: () {
                                  Get.to(
                                    () => const HomePage(),
                                    transition: Transition.downToUp,
                                    curve: Curves.easeInOutExpo,
                                  );
                                },
                                icon: Icons.home),
                          ],
                        )
                      : const SizedBox(), // Choose the desired overlay color
                )),
          ),
        ),
        Positioned(
            right: 5,
            top: 110,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                  color: AppColor.secondaryColor,
                  boxShadow: [
                    BoxShadow(
                        color: AppColor.accentColor,
                        offset: Offset(-3, -3),
                        blurRadius: 0,
                        spreadRadius: 0,
                        blurStyle: BlurStyle.outer),
                    BoxShadow(
                        color: AppColor.accentColor,
                        offset: Offset(3, 3),
                        blurRadius: 0,
                        spreadRadius: 0,
                        blurStyle: BlurStyle.outer)
                  ]),
              width: controller.widthMenu,
              height: Get.height * .3,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconMainPageMap(
                    onTap: () {
                      Get.to(() => const PassengerWallet());
                    },
                    title: 'My Wallet',
                    icon: Icons.wallet,
                  ),
                  IconMainPageMap(
                    onTap: () async {
                      Get.to(() => const OrderHistory());
                    },
                    title: 'Order History',
                    icon: Icons.history,
                  ),
                  IconMainPageMap(
                    onTap: () {},
                    title: 'Tariff',
                    icon: Icons.money,
                  ),
                ],
              ),
            )),
        Positioned(
            left: 5,
            top: 110,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                  color: AppColor.secondaryColor,
                  boxShadow: [
                    BoxShadow(
                        color: AppColor.accentColor,
                        offset: Offset(-3, -3),
                        blurRadius: 0,
                        spreadRadius: 0,
                        blurStyle: BlurStyle.outer),
                    BoxShadow(
                        color: AppColor.accentColor,
                        offset: Offset(3, 3),
                        blurRadius: 0,
                        spreadRadius: 0,
                        blurStyle: BlurStyle.outer)
                  ]),
              width: controller.widthMenu,
              height: Get.height * .3,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconMainPageMap(
                    onTap: () {},
                    title: 'Settings',
                    icon: Icons.settings,
                  ),
                  IconMainPageMap(
                    onTap: () {},
                    title: 'Feed Back',
                    icon: Icons.feedback,
                  ),
                  IconMainPageMap(
                    onTap: () {
                      Get.to(() => const PromosPassengerPage());
                    },
                    title: 'Promos',
                    icon: Icons.monetization_on,
                  ),
                ],
              ),
            ))
      ]),
    );
  }
}

class IconMainPageMap extends StatelessWidget {
  const IconMainPageMap({
    super.key,
    required this.title,
    required this.onTap,
    required this.icon,
  });

  final String title;
  final IconData icon;
  final Callback onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.all(4),
        child: Container(
          width: double.maxFinite,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(16)),
            color: AppColor.secondaryColor,
            boxShadow: [
              BoxShadow(
                color: AppColor.accentColor,
                offset: Offset(3, 3),
                blurRadius: 0,
                spreadRadius: 0,
                blurStyle: BlurStyle.outer,
              ),
            ],
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Icon(icon),
                Text(
                  title.tr,
                  style: AppStyle.subtitle,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}