import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../../config/translations/strings_enum.dart';
import '../../../../config/theme/light_theme_colors.dart';
import '../../../../config/theme/dark_theme_colors.dart';
import '../../../data/sp/ix_sp.dart';

class IXBottomNavigationBar extends StatelessWidget {
  final int currentIndex;
  final int lastIndex;
  final Function(int) onTap;

  const IXBottomNavigationBar({
    super.key,
    required this.currentIndex,
    required this.lastIndex,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 4, sigmaY: 10),
        child: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildNavItem(
                icon: Icons.gamepad,
                label: Strings.bottomBarGames.tr,
                index: 0,
                onTap: () => onTap(0),
              ),
              _buildNavItem(
                icon: Icons.bolt,
                label: Strings.bottomBarBoost.tr,
                index: 1,
                onTap: () => onTap(1),
              ),
              _buildNavItem(
                icon: Icons.person,
                label: Strings.bottomBarMe.tr,
                index: 2,
                onTap: () => onTap(2),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildNavItem({
    required IconData icon,
    required String label,
    required int index,
    required VoidCallback onTap,
  }) {
    final isSelected = currentIndex == index;
    final bool isLightTheme = IXSP.getThemeIsLight();

    // 根据主题获取颜色
    final selectedColor = isLightTheme
        ? LightThemeColors.bottomBarSelectedColor
        : DarkThemeColors.bottomBarSelectedColor;
    final unselectedColor = isLightTheme
        ? LightThemeColors.bottomBarUnselectedColor
        : DarkThemeColors.bottomBarUnselectedColor;

    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.opaque,
      child: Stack(
        children: [
          Container(
            width: 100,
            height: 52,
            margin: const EdgeInsets.only(top: 12),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                AnimatedSwitcher(
                  duration: const Duration(milliseconds: 300),
                  transitionBuilder: (child, animation) {
                    return FadeTransition(opacity: animation, child: child);
                  },
                  child: Icon(
                    icon,
                    key: ValueKey("bottom_bar_icon_$isSelected"),
                    size: 24,
                    color: isSelected ? selectedColor : unselectedColor,
                  ),
                ),
                AnimatedDefaultTextStyle(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  style: TextStyle(
                    fontSize: 12,
                    height: 1.4,
                    color: isSelected ? selectedColor : unselectedColor,
                    fontWeight: FontWeight.w500,
                  ),
                  child: Text(label),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}