import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:test_sa/extensions/context_extension.dart';

import '../../models/enums/translation_keys.dart';
import '../app_style/app_color.dart';

class AppBottomNavigationBar extends StatefulWidget {
  final Function(int index) onPressed;
  const AppBottomNavigationBar({Key key, @required this.onPressed}) : super(key: key);

  @override
  State<AppBottomNavigationBar> createState() => _AppBottomNavigationBarState();
}

class _AppBottomNavigationBarState extends State<AppBottomNavigationBar> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    widget.onPressed.call(index);
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 20,
      borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
      child: SizedBox(
        height: 100,
        child: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(20.0)),
          child: BottomNavigationBar(
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/images/Overview.svg', width: 24, height: 24, color: _selectedIndex == 0 ? AppColor.primary70 : AppColor.neutral20),
                label: context.translate(TranslationKeys.overview),
              ),
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/images/requests.svg', width: 24, height: 24, color: _selectedIndex == 1 ? AppColor.primary70 : AppColor.neutral20),
                label: context.translate(TranslationKeys.myRequest),
              ),
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/images/assets.svg', width: 24, height: 24, color: _selectedIndex == 2 ? AppColor.primary70 : AppColor.neutral20),
                label: context.translate(TranslationKeys.myRequest),
              ),
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/images/message.svg', width: 24, height: 24, color: _selectedIndex == 3 ? AppColor.primary70 : AppColor.neutral20),
                label: context.translate(TranslationKeys.contactUs),
              ),
            ],
            currentIndex: _selectedIndex,
            type: BottomNavigationBarType.fixed,
            unselectedFontSize: 14,
            unselectedLabelStyle: const TextStyle(height: 2),
            selectedLabelStyle: const TextStyle(height: 2),
            selectedItemColor: AppColor.primary70,
            unselectedItemColor: AppColor.neutral20,
            onTap: _onItemTapped,
          ),
        ),
      ),
    );
  }
}