import 'package:mc_common_app/classes/app_state.dart';
import 'package:mc_common_app/utils/utils.dart';
import 'package:mc_common_app/view_models/dashboard_view_model_customer.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';

class CustomBottomNavbar extends StatelessWidget {
  const CustomBottomNavbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    DashboardVmCustomer dashboardVM = context.watch<DashboardVmCustomer>();
    return BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: SvgPicture.asset(MyAssets.branchesIcon).paddingAll(5),
          activeIcon: SvgPicture.asset(MyAssets.branchesIcon, color: MyColors.darkIconColor).paddingAll(5),
          label: LocaleKeys.branches.tr(),
        ),
        BottomNavigationBarItem(
          icon: SvgPicture.asset(MyAssets.appointmentsIcon).paddingAll(5),
          activeIcon: SvgPicture.asset(MyAssets.appointmentsIcon, color: MyColors.darkIconColor).paddingAll(5),
          label: LocaleKeys.appointments.tr(),
        ),
        BottomNavigationBarItem(
          icon: SvgPicture.asset(
            MyAssets.homeIcon,
            color: MyColors.lightIconColor,
          ).paddingAll(5),
          activeIcon: SvgPicture.asset(MyAssets.homeIcon, color: MyColors.darkIconColor).paddingAll(5),
          label: LocaleKeys.explore.tr(),
        ),
        BottomNavigationBarItem(
          icon: SvgPicture.asset(MyAssets.announcementIcon).paddingAll(5),
          activeIcon: SvgPicture.asset(MyAssets.announcementIcon, color: MyColors.darkIconColor).paddingAll(5),
          label: LocaleKeys.ads.tr(),
        ),
        BottomNavigationBarItem(
          icon: SvgPicture.asset(MyAssets.icRequests).paddingAll(5),
          activeIcon: SvgPicture.asset(MyAssets.icRequests, color: MyColors.darkIconColor).paddingAll(5),
          label: LocaleKeys.requests.tr(),
        ),
      ],
      currentIndex: dashboardVM.selectedNavbarBarIndex,
      type: BottomNavigationBarType.fixed,
      selectedItemColor: MyColors.darkIconColor,
      showSelectedLabels: true,
      showUnselectedLabels: true,
      unselectedItemColor: MyColors.lightTextColor,
      unselectedFontSize: 11,
      selectedFontSize: 11,
      selectedLabelStyle: const TextStyle(fontFamily: "Poppins"),
      unselectedLabelStyle: const TextStyle(fontFamily: "Poppins"),
      onTap: (index) => dashboardVM.onNavbarTapped(index),
    );
  }
}