import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/homepage/homepage_view.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view/plan_view.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart';
import 'package:cims_apps/features/profile/view/profile_view.dart';
import 'package:cims_apps/features/transaction/view/transaction_view.dart';
import 'package:flutter/material.dart';

class BottomNavigationItem {
  String icon, label;

  BottomNavigationItem(this.icon, this.label);
}

class BottomNavigationView extends StatefulWidget {
  const BottomNavigationView({Key? key}) : super(key: key);

  @override
  State<BottomNavigationView> createState() => _BottomNavigationViewState();
}

class _BottomNavigationViewState extends State<BottomNavigationView> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    List<Widget> listWidget = const [
      HomeView(),
      PlanView(),
      TransactionView(),
      PortofolioView(),
      ProfileView(),
    ];

    List<BottomNavigationItem> listNavigation = [
      BottomNavigationItem(PathAssets.iconNavigationHome, 'Home'),
      BottomNavigationItem(PathAssets.iconNavigationPlan, 'Plan'),
      BottomNavigationItem(PathAssets.iconNavigationTransaction, 'Transaction'),
      BottomNavigationItem(PathAssets.iconNavigationPortfolio, 'Portfolio'),
      BottomNavigationItem(PathAssets.iconNavigationProfile, 'Profile')
    ];

    return Scaffold(
      body: listWidget[_selectedIndex],
      bottomNavigationBar: Container(
        decoration: const BoxDecoration(
          border: Border(top: BorderSide(color: ColorPalette.slate200))
        ),
        padding: const EdgeInsets.symmetric(vertical: 12),
        child: BottomNavigationBar(
          elevation: 0,
          onTap: (value) {
            setState(() {
              _selectedIndex = value;
            });
          },
          currentIndex: _selectedIndex,
          items: listNavigation.asMap().entries.map((e) {
            return BottomNavigationBarItem(
              icon: Padding(
                padding: const EdgeInsets.only(bottom: 4),
                child: Image.asset(
                  e.value.icon,
                  width: SizeConfig.width * 0.06,
                  color: e.key == _selectedIndex ? ColorPalette.primary : ColorPalette.slate800
                ),
              ),
              label: e.value.label
            );
          }).toList(),
          type: BottomNavigationBarType.fixed,
          showUnselectedLabels: true,
          selectedItemColor: ColorPalette.primary,
          unselectedItemColor: Colors.black,
          selectedLabelStyle: const TextStyle(color: ColorPalette.primary, fontSize: 12),
          unselectedLabelStyle: const TextStyle(color: Colors.black, fontSize: 12),
        ),
      ),
    );
  }
}