import 'package:boilerplate/core/i18n/translations.g.dart';
import 'package:boilerplate/core/styles/my_dimensions.dart';
import 'package:boilerplate/core/styles/my_font.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class BottomNavigation extends StatelessWidget {
  final int currentIndex;
  final Function(int) onIndexChanged;

  final List<BottomNavigationData> _items = [
    BottomNavigationData(
      icon: 'assets/icons/ic_home.svg',
      title: AppLocalizations.landing.home_page,
      index: 0,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_think.svg',
      title: AppLocalizations.products.idea,
      index: 1,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_calendar.svg',
      title: AppLocalizations.landing.business_matching,
      index: 2,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_chat.svg',
      title: AppLocalizations.landing.chat,
      index: 3,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_person.svg',
      title: AppLocalizations.landing.profile,
      index: 4,
    ),
  ];
  final List<BottomNavigationData> _items_en = [
    BottomNavigationData(
      icon: 'assets/icons/ic_home.svg',
      title: AppLocalizations.landing.home_page_en,
      index: 0,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_think.svg',
      title: AppLocalizations.products.idea_en,
      index: 1,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_calendar.svg',
      title: 'Business\nMatching',
      index: 2,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_chat.svg',
      title: AppLocalizations.landing.chat_en,
      index: 3,
    ),
    BottomNavigationData(
      icon: 'assets/icons/ic_person.svg',
      title: AppLocalizations.landing.profile_en,
      index: 4,
    ),
  ];
  final String? myLang;

  BottomNavigation(
      {Key? key,
      required this.currentIndex,
      required this.onIndexChanged,
      this.myLang})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        width: double.infinity,
        height: MyDimens.dimen85,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.vertical(
            top: Radius.circular(10),
          ),
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFFD3CCC6),
              Color(0xFFAAAAAA),
            ],
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: this.myLang == 'th' || this.myLang == ""
              ? _items
                  .map(
                    (e) => Expanded(
                      child: GestureDetector(
                        onTap: () => onIndexChanged(e.index),
                        child: Container(
                          padding: EdgeInsets.only(
                            bottom: MediaQuery.of(context).padding.bottom,
                          ),
                          decoration: BoxDecoration(
                            gradient: e.index == currentIndex
                                ? LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFFF15B44),
                                      Color(0xFFB21F29),
                                    ],
                                  )
                                : null,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(e.index == 0 ? 10 : 0),
                              topRight: Radius.circular(e.index == 4 ? 10 : 0),
                            ),
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              SizedBox(height: MyDimens.dimen8),
                              SvgPicture.asset(
                                e.icon,
                                height: MyDimens.dimen22,
                              ),
                              SizedBox(height: MyDimens.dimen8),
                              Text(
                                e.title,
                                style: MyFont.regular10.copyWith(
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  )
                  .toList()
              : _items_en
                  .map(
                    (e) => Expanded(
                      child: GestureDetector(
                        onTap: () => onIndexChanged(e.index),
                        child: Container(
                          padding: EdgeInsets.only(
                              // bottom: MediaQuery.of(context).padding.bottom,
                              ),
                          decoration: BoxDecoration(
                            gradient: e.index == currentIndex
                                ? LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFFF15B44),
                                      Color(0xFFB21F29),
                                    ],
                                  )
                                : null,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(e.index == 0 ? 10 : 0),
                              topRight: Radius.circular(e.index == 4 ? 10 : 0),
                            ),
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              SizedBox(height: MyDimens.dimen8),
                              SvgPicture.asset(
                                e.icon,
                                height: MyDimens.dimen22,
                              ),
                              SizedBox(height: MyDimens.dimen8),
                              Text(
                                e.title,
                                maxLines: 2,
                                style: MyFont.regular10.copyWith(
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  )
                  .toList(),
        ),
      ),
    );
  }
}

class BottomNavigationData {
  final String icon;
  final String title;
  final int index;

  BottomNavigationData({
    required this.icon,
    required this.title,
    required this.index,
  });
}
