import 'package:elektronika/library/fade_in_indexed.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

import '../../app.dart';

class DashboardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    debugPrint('DASHBOARD PAGE');
    return GetX<DashboardController>(
      init: DashboardController(),
      builder: (controller) => Scaffold(
        body: SafeArea(
          child: FadeIndexedStack(
            key: UniqueKey(),
            index: controller.tabIndex.value,
            children: [
              controller.tabIndex.value == 0 ? HomePage() : Container(),
              controller.tabIndex.value == 1 ? CategoryPage() : Container(),
              controller.tabIndex.value == 2 ? ProfilePage() : Container(),
              controller.tabIndex.value == 3 ? SettingsPage() : Container(),
            ],
          ),
        ),
        bottomNavigationBar: SizeTransition(
          sizeFactor: controller.animationController,
          child: Container(
            decoration: new BoxDecoration(
              border: Border(
                top: BorderSide(color: ThemeColor.grey, width: 0.35),
              ),
            ),
            child: BottomNavigationBar(
                onTap: controller.changeTabIndex,
                currentIndex: controller.tabIndex.value,
                type: BottomNavigationBarType.fixed,
                showSelectedLabels: false,
                showUnselectedLabels: false,
                items: _getBottomNavbarItems()),
          ),
        ),
      ),
    );
  }

  List<BottomNavigationBarItem> _getBottomNavbarItems() {
    List<BottomNavigationBarItem> _items = [
      BottomNavigationBarItem(
        label: 'home'.tr,
        icon: _navbarIcon('home.svg', 'home'.tr),
        activeIcon: _navbarIcon('home.svg', 'home'.tr, true),
      ),
      BottomNavigationBarItem(
        icon: _navbarIcon('layout.svg', 'categories'.tr),
        activeIcon: _navbarIcon('layout.svg', 'categories'.tr, true),
        label: 'categories'.tr,
      ),
      BottomNavigationBarItem(
        icon: _navbarIcon('user.svg', 'profile'.tr),
        activeIcon: _navbarIcon('user.svg', 'profile'.tr, true),
        label: 'profile'.tr,
      ),
      BottomNavigationBarItem(
        icon: _navbarIcon('settings.svg', 'settings'.tr),
        activeIcon: _navbarIcon('settings.svg', 'settings'.tr, true),
        label: 'settings'.tr,
      ),
    ];
    return _items;
  }

  Widget _navbarIcon(String path, String label, [isActiveIcon = false]) {
    final String navbarPath = 'assets/navbar/';
    return Column(
      children: [
        SvgPicture.asset(
          navbarPath + path,
          height: 20.h,
          width: 20.w,
          color: isActiveIcon ? ThemeColor.mainColor : ThemeColor.color3A3A3A,
        ),
        SizedBox(height: 3),
        Text(
          label,
          style: TextStyle(
            fontSize: 8,
            color: isActiveIcon ? ThemeColor.mainColor : ThemeColor.color3A3A3A,
          ),
        ),
      ],
    );
  }
}
