import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';

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

class AppBottomNavigationBar extends StatelessWidget {
  final Function(int index) onPressed;
  final int selectedIndex;

  const AppBottomNavigationBar({
    Key key,
    @required this.onPressed,
    @required this.selectedIndex,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
      child: Container(
        height: 100.toScreenHeight,
        decoration: const BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Color(0x0C000000),
              blurRadius: 14,
              offset: Offset(0, 0),
              spreadRadius: 0,
            )
          ],
        ),
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            navBarItem(context, index: 0, iconName: "overview", label: context.translation.overview),
            navBarItem(context, index: 1, iconName: "requests", label: context.translation.myRequests),
            navBarItem(context, index: 2, iconName: "assets", label: context.translation.myAssets),
            navBarItem(context, index: 3, iconName: "message", label: context.translation.contactUs),
          ],
          currentIndex: selectedIndex,
          onTap: onPressed,
          selectedLabelStyle: AppTextStyles.tinyFont.copyWith(fontSize: 11),
          unselectedLabelStyle: AppTextStyles.tinyFont.copyWith(fontSize: 11),
          selectedItemColor: AppColor.primary70,
          unselectedItemColor: const Color(0xFF757575),
        ),
      ),
    );
  }

  BottomNavigationBarItem navBarItem(BuildContext context, {@required int index, @required String iconName, @required String label}) {
    return BottomNavigationBarItem(
      icon: Padding(
        padding: EdgeInsets.symmetric(vertical: 10.toScreenHeight),
        child: SvgPicture.asset(
          'assets/images/$iconName.svg',
          width: 24.toScreenWidth,
          color: selectedIndex == index ? Theme.of(context).bottomNavigationBarTheme.selectedItemColor : Theme.of(context).bottomNavigationBarTheme.unselectedItemColor,
        ),
      ),
      label: label,
    );
  }
}