import 'dart:async';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:mythgames/core/init/constants/widget_constants.dart';
import 'package:mythgames/presentation/pages/homepage/homepage_screen.dart';
import 'package:mythgames/presentation/pages/profile/profile_screen.dart';
import 'package:mythgames/presentation/pages/settings/settings_screen.dart';

class RootPage extends StatefulWidget {


  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage>{

  int selectedTab = 0;
  late PageController _pageController;

  List<Widget> tabPages = [
    HomepageScreen(),
    SettingsScreen(),
    ProfileScreen()
  ];

  @override
  void initState() {
    _pageController = PageController(initialPage: selectedTab);
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
  Color iconColor = Color(0xFFC4D9FF);

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {

    double widthSize = resWidthSize(context);
    double heightSize = resHeightSize(context);

    return GestureDetector(
      onTap: () => FocusScope.of(context).requestFocus(new FocusNode()),
      child: Scaffold(
        backgroundColor: Colors.black,
          key: _scaffoldKey,
          bottomNavigationBar: ClipRRect(
            borderRadius: const BorderRadius.only(
              topRight: Radius.circular(40),
              topLeft: Radius.circular(40),
            ),
            child: Container(
              color: const Color(0xFF2a2319),
              child:  Padding(
                padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 20),
                child: GNav(
                  selectedIndex: selectedTab,
                  tabBorderRadius: WidgetConstants.borderRadius1,
                  gap: 8,
                  backgroundColor: const Color(0xFF2a2319),
                  color: const Color(0xFF625546),
                  activeColor: const Color(0xFFffffff),
                  tabBackgroundColor:const Color(0xFFac8c6b),
                  padding: const EdgeInsets.all(9),
                  onTabChange: onTabTapped,
                  tabs: const [
                    GButton(
                      icon: Icons.home_filled,
                      text: "Home",
                      textStyle:  TextStyle(
                        fontSize: 15,
                        fontFamily: "Inter",
                        fontWeight: FontWeight.w500,
                        color: Color(0xFFffffff),
                      ),
                    ),
                    GButton(
                      icon: Icons.explore_outlined,
                      text: "Search",
                      textStyle: TextStyle(
                        fontSize: 15,
                        fontFamily: "Inter",
                        fontWeight: FontWeight.w500,
                        color: Color(0xFFffffff),
                      ),
                    ),
                    GButton(
                      icon: Icons.person_outline,
                      text: "Profile",
                      textStyle: TextStyle(
                        fontSize: 15,
                        fontFamily: "Inter",
                        fontWeight: FontWeight.w500,
                        color: Color(0xFFffffff),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        body: PageView(
          children: tabPages,
          onPageChanged: onPageChanged,
          controller: _pageController,
          physics: NeverScrollableScrollPhysics(),
        ),
      ),
    );
  }

  void onPageChanged(int page) {
    // PageView onPageChanged
    setState(() {
      this.selectedTab = page;
    });
  }

  void onTabTapped(int index) {  // BottomNavigatonBar OnTap
    FocusScope.of(context).requestFocus(new FocusNode());
    this._pageController.jumpToPage(index);
  }




  double resWidthSize(BuildContext context){
    double widthSize;
    if(MediaQuery.of(context).size.width>598)  widthSize = MediaQuery.of(context).size.width * 0.0072;
    else widthSize = MediaQuery.of(context).size.width * 0.01;
    return widthSize;
  }
  double resHeightSize(BuildContext context){
    double heightSize = MediaQuery.of(context).size.height * 0.01;
    return heightSize;
  }
}