import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:moody/utils/definitions/color_pair.dart';
import 'package:moody/utils/logic/preferences_service.dart';

class CustomBottomNavigationBar extends StatefulWidget {
  final int initialSelectedIndex;

  const CustomBottomNavigationBar({Key? key, this.initialSelectedIndex = 0}) : super(key: key);

  @override
  State<CustomBottomNavigationBar> createState() => _CustomBottomNavigationBar();
}

class _CustomBottomNavigationBar extends State<CustomBottomNavigationBar> {
  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    _selectedIndex = widget.initialSelectedIndex;
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    var currentRoute = GoRouter.of(context).routeInformationProvider.value.uri.toString();
    var goToRoute = "/";
    switch (index) {
      case 0:
        goToRoute = "/statistic";
        break;
      case 1:
        goToRoute = "/home";
        break;
      case 2:
        goToRoute = "/settings";
        break;
    }
    if (currentRoute != goToRoute) {
      context.go(goToRoute);
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ColorPair>(
      future: PreferencesService().loadColorPair(), // Async loading of the color
      builder: (BuildContext context, AsyncSnapshot<ColorPair> snapshot) {
        if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
          // When data is loaded
          Color backgroundColor = snapshot.data!.backgroundColor; // Use loaded background color
          Color textColor = snapshot.data!.textColor; // Use loaded background color

          return buildNavigationBar(backgroundColor, textColor);
        } else {
          // While loading or if no data, show default or loading indicator
          return buildNavigationBar(Colors.white, Colors.black); // Default color or loading indicator
        }
      },
    );
  }

  Widget buildNavigationBar(Color backgroundColor, textColor) {
    return Container(
      width: 175,
      margin: const EdgeInsets.only(bottom: 30),
      padding: const EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.transparent),
        borderRadius: BorderRadius.circular(35), // Adjust radius to fit your design
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 7,
            offset: const Offset(3, 3), // changes position of shadow
          ),
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 1,
            blurRadius: 5,
            offset: const Offset(-1, -1), // changes position of shadow
          ),
          // You can add more BoxShadow layers to create more complex shadows
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(35),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            _buildNavItem(SvgPicture.asset('assets/icons/icon-analyze.svg', color: textColor), 0, backgroundColor),
            _buildNavItem(SvgPicture.asset('assets/icons/logo.svg', color: textColor, fit: BoxFit.cover), 1, backgroundColor),
            _buildNavItem(SvgPicture.asset('assets/icons/icon-settings.svg', color: textColor, fit: BoxFit.contain), 2, backgroundColor),
          ],
        ),
      ),
    );
  }

  Widget _buildNavItem(SvgPicture icon, int index, Color selectedColor) {
    return Container(
      height: 40,
      width: 40,
      decoration: _selectedIndex == index
          ? BoxDecoration(
              color: selectedColor,
              borderRadius: BorderRadius.circular(40),
            )
          : null,
      child: IconButton(
        icon: icon,
        color: _selectedIndex == index ? Colors.white : null,
        onPressed: () => _onItemTapped(index),
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        iconSize: 40,
      ),
    );
  }
}