import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_pos_ecommerce/module/ecommerce/presentation/home/models/product_quantity.dart';
import 'package:flutter_svg/flutter_svg.dart';

// import '../../../core/components/spaces.dart';
import 'package:badges/badges.dart' as badges;

import '../../../../../core/components/spaces.dart';
import '../../../../../core/constants/colors.dart';
import '../bloc/checkout_pos/checkout_pos_bloc.dart';

class NavItem extends StatelessWidget {
  final String iconPath;
  final String label;
  final bool isActive;
  final VoidCallback onTap;

  const NavItem({
    super.key,
    required this.iconPath,
    required this.label,
    required this.isActive,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: const BorderRadius.all(Radius.circular(16.0)),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          label == 'Orders'
              ? BlocBuilder<CheckoutPosBloc, CheckoutPosState>(
                  builder: (context, state) {
                    return state.maybeWhen(
                      orElse: () {
                        return SizedBox(
                          width: 25.0,
                          height: 25.0,
                          child: SvgPicture.asset(
                            iconPath,
                            colorFilter: ColorFilter.mode(
                              isActive ? AppColors.black : AppColors.disabled,
                              BlendMode.srcIn,
                            ),
                          ),
                        );
                      },
                      loaded: (data,_) {
                        if (data.isEmpty) {
                          return SizedBox(
                            width: 25.0,
                            height: 25.0,
                            child: SvgPicture.asset(
                              iconPath,
                              colorFilter: ColorFilter.mode(
                                isActive ? AppColors.black : AppColors.disabled,
                                BlendMode.srcIn,
                              ),
                            ),
                          );
                        } else {
                          final totalQuantity = data.fold<int>(
                            0,
                            (previousValue, element) =>
                                previousValue + element.quantity,
                          );
                          return totalQuantity > 0
                              ? badges.Badge(
                                  badgeContent: Text(
                                    totalQuantity.toString(),
                                    style: const TextStyle(color: Colors.white),
                                  ),
                                  child: SizedBox(
                                    width: 25.0,
                                    height: 25.0,
                                    child: SvgPicture.asset(
                                      iconPath,
                                      colorFilter: ColorFilter.mode(
                                        isActive
                                            ? AppColors.black
                                            : AppColors.disabled,
                                        BlendMode.srcIn,
                                      ),
                                    ),
                                  ),
                                )
                              : const SizedBox();
                        }
                      },
                    );
                    // return badges.Badge(
                    //   badgeContent: Text('3'),
                    //   child: SizedBox(
                    //     width: 25.0,
                    //     height: 25.0,
                    //     child: SvgPicture.asset(
                    //       iconPath,
                    //       colorFilter: ColorFilter.mode(
                    //         isActive ? AppColors.black : AppColors.disabled,
                    //         BlendMode.srcIn,
                    //       ),
                    //     ),
                    //   ),
                    // );
                  },
                )
              : SizedBox(
                  width: 25.0,
                  height: 25.0,
                  child: SvgPicture.asset(
                    iconPath,
                    colorFilter: ColorFilter.mode(
                      isActive ? AppColors.black : AppColors.disabled,
                      BlendMode.srcIn,
                    ),
                  ),
                ),
          const SpaceHeight(4.0),
          Text(
            label,
            style: TextStyle(
              fontSize: 12,
              color: isActive ? AppColors.black : AppColors.disabled,
            ),
          ),
        ],
      ),
    );
  }
}
