import 'package:flutter/material.dart';
import 'package:flutter_font_icons/flutter_font_icons.dart';
import 'package:get/get.dart';
import 'package:get/get_rx/src/rx_typedefs/rx_typedefs.dart';
import 'package:SEFER/constant/style.dart';
import 'package:SEFER/views/auth/captin/register_captin.dart';
import 'package:SEFER/views/home/my_wallet/passenger_wallet.dart';
import 'package:SEFER/views/home/profile/feed_back_page.dart';
import 'package:SEFER/views/home/profile/order_history.dart';
import 'package:SEFER/views/home/profile/promos_passenger_page.dart';
import 'package:SEFER/views/home/profile/taarif_page.dart';

import '../../../constant/colors.dart';
import '../../../controller/home/map_passenger_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<MapPassengerController>(
      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: AppStyle.boxDecoration,
                  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(
                                  () => 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'.tr,
                    icon: Icons.wallet,
                  ),
                  IconMainPageMap(
                    onTap: () async {
                      Get.to(() => const OrderHistory());
                    },
                    title: 'Order History'.tr,
                    icon: Icons.history,
                  ),
                  IconMainPageMap(
                    onTap: () {
                      Get.to(() => const TaarifPage());
                    },
                    title: 'Tariff'.tr,
                    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: () {
                      Get.to(const RegisterCaptin());
                    },
                    title: 'Driver'.tr,
                    icon: WeatherIcons.wi_moon_14,
                  ),
                  IconMainPageMap(
                    onTap: () {
                      Get.to(() => FeedBackPage());
                    },
                    title: 'Feed Back'.tr,
                    icon: Icons.feedback,
                  ),
                  IconMainPageMap(
                    onTap: () {
                      Get.to(() => const PromosPassengerPage());
                    },
                    title: 'Promos'.tr,
                    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 FutureBuilder(
        future: Future.delayed(const Duration(milliseconds: 400)),
        builder: (context, snapshot) {
          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,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        });
  }
}
