import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:glassmorphism_ui/glassmorphism_ui.dart';
import 'package:regroup/Common/controller/MainController.dart';

GlassContainer bottomnavigationbar(MainController _mainController) {
  return GlassContainer(
    width: double.infinity,
    height: 100,
    borderRadius: BorderRadius.circular(2),
    blur: 2,
    opacity: 0.2,
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Color(0xFFFFFFFF).withOpacity(0.4),
        const Color(0xFFFFFFFF).withOpacity(0.5),
      ],
      stops: const [
        0.1,
        1,
      ],
    ),
    border: Border.all(color: const Color(0xff434A53)),
    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      backgroundColor: const Color(0xFFFFFFFF).withOpacity(0),
      showUnselectedLabels: true,
      selectedItemColor: Colors.white,
      unselectedItemColor: const Color(0xFF676767),
      unselectedLabelStyle: TextStyle(
          height: 3,
          fontSize: 10.sp,
          color: const Color(0xFF676767),
          fontWeight: FontWeight.w400,
          fontFamily: 'Helvetica'),
      selectedLabelStyle: TextStyle(
          fontSize: 10.sp,
          color: const Color(0xFFFFFFFF),
          fontWeight: FontWeight.w400,
          fontFamily: 'Helvetica'),
      currentIndex: _mainController.selectedIndex.value,
      onTap: (index) {
        _mainController.updateTab(index);
      },
      items: [
        BottomNavigationBarItem(
          icon: SvgPicture.asset(
            'assets/images/png/unactiveHomeBottomBar.svg',
            height: 25.h,
            // width: 25.w,
          ),
          activeIcon: Stack(
            clipBehavior: Clip.none,
            children: [
              if (_mainController.selectedIndex.value == 0)
                Container(
                  height: 25.h,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0xFFD90B2E).withOpacity(0.5),
                        spreadRadius: 15,
                        blurRadius: 25,
                        offset: const Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              // Positioned(
              //     left: 0,
              //     right: 0,
              //     top: -15,
              //     child: Container(
              //       height: 2.h,
              //       width: 20.w,
              //       decoration: BoxDecoration(
              //           borderRadius: BorderRadius.circular(10.r),
              //           color: const Color(0xFFD90B2E)),
              //     )),
              Positioned(
                top: 0,
                bottom: 0,
                right: 0,
                left: 0,
                child: Center(
                  child: Image.asset(
                    "assets/images/png/BottomBar/ActiveHome.png",
                    height: 30.h,
                    width: 30.w,
                  ),
                ),
              )
            ],
          ),
          label: 'Community',
        ),
        BottomNavigationBarItem(
          icon: SvgPicture.asset(
            'assets/images/png/BottomBar/groupBottomBarIcon.svg',
            height: 25.h,
            //  width: 25.w,
          ),
          activeIcon: Stack(
            clipBehavior: Clip.none,
            children: [
              if (_mainController.selectedIndex.value == 1)
                Container(
                  height: 25.h,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0xFFD90B2E).withOpacity(0.5),
                        spreadRadius: 15,
                        blurRadius: 25,
                        offset: const Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              // Positioned(
              //     left: 0,
              //     right: 0,
              //     //top: -20,
              //     child: Container(
              //       height: 2.h,
              //       // width: 10.w,
              //       decoration: BoxDecoration(
              //           borderRadius: BorderRadius.circular(10.r),
              //           color: const Color(0xFFD90B2E)),
              //     )),
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Center(
                    child: Image.asset(
                      'assets/images/png/BottomBar/activeGroup.png',
                      height: 30.h,
                      width: 30.w,
                    ),
                  )),
            ],
          ),

          // SvgPicture.asset('assets/image/svg/active_shortTrade.svg'),
          label: 'Group',
        ),
        BottomNavigationBarItem(
          icon: Image.asset(
            'assets/images/png/BottomBar/inactiveCal.png',
            height: 22.h,
            width: 22.w,
          ),
          activeIcon: Stack(
            clipBehavior: Clip.none,
            children: [
              if (_mainController.selectedIndex.value == 2)
                Container(
                  height: 25.h,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0xFFD90B2E).withOpacity(0.5),
                        spreadRadius: 15,
                        blurRadius: 25,
                        offset: const Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              // Positioned(
              //     left: 0,
              //     right: 0,
              //     top: -15,
              //     child: Container(
              //       height: 2.h,
              //       width: 20.w,
              //       decoration: BoxDecoration(
              //           borderRadius: BorderRadius.circular(10.r),
              //           color: const Color(0xFFD90B2E)),
              //     )),
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Center(
                    child: Image.asset(
                      'assets/images/png/BottomBar/ActiveCal.png',
                      height: 30.h,
                      width: 30.w,
                    ),
                  ))
            ],
          ),
          label: 'Calendar',
        ),
        BottomNavigationBarItem(
          icon: Image.asset(
            'assets/images/png/BottomBar/inactiveChat.png',
            height: 25.h,
          ),
          activeIcon: Stack(
            clipBehavior: Clip.none,
            children: [
              if (_mainController.selectedIndex.value == 3)
                Container(
                  height: 25.h,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0xFFD90B2E).withOpacity(0.5),
                        spreadRadius: 15,
                        blurRadius: 25,
                        offset: const Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              // Positioned(
              //     left: 0,
              //     right: 0,
              //     top: -15,
              //     child: Container(
              //       height: 2.h,
              //       width: 20.w,
              //       decoration: BoxDecoration(
              //           borderRadius: BorderRadius.circular(10.r),
              //           color: const Color(0xFFD90B2E)),
              //     )),
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Center(
                    child: Image.asset(
                      'assets/images/png/BottomBar/ActiveChat.png',
                      height: 30.h,
                      width: 30.w,
                    ),
                  ))
            ],
          ),

          // SvgPicture.asset('assets/image/svg/active_shortTrade.svg'),
          label: 'Chats',
        ),
        BottomNavigationBarItem(
          icon: Image.asset(
            'assets/images/png/BottomBar/inactivePeople.png',
            height: 22.h,
            width: 22.w,
          ),
          activeIcon: Stack(
            clipBehavior: Clip.none,
            children: [
              if (_mainController.selectedIndex.value == 4)
                Container(
                  height: 25.h,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0xFFD90B2E).withOpacity(0.5),
                        spreadRadius: 15,
                        blurRadius: 25,
                        offset: const Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              // Positioned(
              //     left: 0,
              //     right: 0,
              //     top: -15,
              //     child: Container(
              //       height: 2.h,
              //       width: 20.w,
              //       decoration: BoxDecoration(
              //           borderRadius: BorderRadius.circular(10.r),
              //           color: const Color(0xFFD90B2E)),
              //     )),
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Center(
                    child: Image.asset(
                      'assets/images/png/BottomBar/activePeople.png',
                      height: 30.h,
                      width: 30.w,
                    ),
                  ))
            ],
          ),

          // SvgPicture.asset('assets/image/svg/active_protfolio.svg'),
          label: 'Profile',
        ),
      ],
    ),
  );
}