import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'package:traderscircuit/Utils/Common/MainController.dart';

GlassmorphicContainer bottomnavigationbar(MainController _mainController) {
  return GlassmorphicContainer(
    width: double.infinity,
    height: 83.h,
    borderRadius: 8,
    blur: 30,
    alignment: Alignment.center,
    border: 0,
    linearGradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Colors.white.withOpacity(0.1),
          Color(0xFFFFFFFF).withOpacity(0.05),
        ],
        stops: [
          0.1,
          1,
        ]),
    borderGradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Color(0xff3A3A3A),
        Color(0xFF3A3A3A),
      ],
    ),
    child: BottomNavigationBar(
      // backgroundColor: ,
      type: BottomNavigationBarType.fixed,
      backgroundColor: Color(0xFFFFFFFF).withOpacity(0),
      showUnselectedLabels: true,
      selectedItemColor: Colors.white,
      unselectedItemColor: Color(0xFF676767),
      unselectedLabelStyle: TextStyle(
          fontSize: 10.sp,
          color: Color(0xFF676767),
          fontWeight: FontWeight.w400,
          fontFamily: 'hiragino'),
      selectedLabelStyle: TextStyle(
          fontSize: 10.sp,
          color: Color(0xFFFFFFFF),
          fontWeight: FontWeight.w400,
          fontFamily: 'hiragino'),
      currentIndex: _mainController.selectedIndex.value,
      onTap: (index) {
        _mainController.updateTab(index);
      },
      items: [
        BottomNavigationBarItem(
          icon: Image.asset(
            'assets/images/png/sidemenu/inactivehome.png',
            height: 26.h,
            width: 26.w,
          ),
          // Icon(
          //   Icons.home,
          //   color: Color(0xFF676767),
          // ),
          activeIcon: Stack(
            children: [
              if (_mainController.selectedIndex.value == 0)
                Container(
                  height: 40.h,
                  width: 40.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.2),
                        spreadRadius: 15,
                        blurRadius: 5,
                        offset: Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              Positioned(
                top: 0,
                bottom: 0,
                right: 0,
                left: 0,
                child: Center(
                  child: Image.asset(
                    'assets/images/png/sidemenu/activehome.png',
                    height: 30.h,
                    width: 30.w,
                  ),
                ),
              )
            ],
          ),

          // activeIcon: SvgPicture.asset('assets/image/svg/active_home.svg'),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Image.asset(
            'assets/images/png/sidemenu/inactiveshorttrade.png',
            height: 26.h,
            width: 26.w,
          ),
          activeIcon: Stack(
            children: [
              if (_mainController.selectedIndex.value == 1)
                Container(
                  height: 40.h,
                  width: 40.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.4),
                        spreadRadius: 15,
                        blurRadius: 10,
                        offset: Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Center(
                    child: Image.asset(
                      'assets/images/png/sidemenu/activetrade.png',
                      height: 30.h,
                      width: 30.w,
                    ),
                  ))
            ],
          ),

          // SvgPicture.asset('assets/image/svg/active_shortTrade.svg'),
          label: 'Short Trade',
        ),
        BottomNavigationBarItem(
          icon: Image.asset(
            'assets/images/png/sidemenu/inactiveprotfolio.png',
            height: 26.h,
            width: 26.w,
          ),
          activeIcon: Stack(
            children: [
              if (_mainController.selectedIndex.value == 2)
                Container(
                  height: 40.h,
                  width: 40.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.4),
                        spreadRadius: 15,
                        blurRadius: 10,
                        offset: Offset(0, 10),
                      ),
                    ],
                  ),
                ),
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Center(
                    child: Image.asset(
                      'assets/images/png/sidemenu/activeprotfolio.png',
                      height: 30.h,
                      width: 30.w,
                    ),
                  ))
            ],
          ),

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