import 'package:betting/commom/utils/app_utils.dart';
import 'package:betting/routes/app_pages.dart';
import 'package:betting/view/mobile/favourites_view/favourites_screen.dart';
import 'package:betting/view/mobile/home_page/home_controller.dart';
import 'package:betting/view/mobile/news/news_page.dart';
import 'package:betting/view/mobile/watch/watch_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../commom/utils/bannerAd.dart';
import '../../../commom/utils/color_utils.dart';
import '../../../commom/utils/textstyle.dart';
import '../scores/scores_page.dart';
import 'dart:io' show Platform;



class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  var controller = Get.find<HomeController>();

  @override
  Widget build(BuildContext context) {
    DateTime oldTime = DateTime.now();
    DateTime newTime = DateTime.now();
    return WillPopScope(child: Obx(() => Stack(
      children: [
        Image.asset(
          "assets/images/background_app_betting.jpg",
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          fit: BoxFit.cover,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          key: _scaffoldKey,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            automaticallyImplyLeading: false,
            bottom: const PreferredSize(preferredSize: Size(double.infinity, 1), child: Divider(color: Colors.white,)),
            title: Text("${controller.getTitleAppBar()}"),
            actions: [
              Visibility(
                  visible: controller.currentIndex.value  == 1,
                  child:  InkWell(
                    onTap: (){
                      controller.isNotification.value =! controller.isNotification.value;
                    },
                    child: controller.isNotification.value == false?
                    const Icon(Icons.notifications,color: Colors.white,) :
                    const Icon(Icons.notifications,color: ColorUtils.PRIMARY_COLOR,),
                  )),
              SizedBox(width: 8.w,),
              InkWell(
                highlightColor: Colors.transparent,
                focusColor: Colors.transparent,
                hoverColor: Colors.transparent,
                onTap: (){
                  Get.toNamed(Routes.find);
                },
                child: const Icon(Icons.search,color: Colors.white,),

              ),
              SizedBox(width: 8.w,),
              IconButton(icon: const Icon(Icons.menu,color: Colors.white,),
                splashColor: Colors.transparent,
                onPressed: () {
                  _scaffoldKey.currentState?.openDrawer();
                },)
            ],
          ),
          drawer:Drawer(
            backgroundColor: const Color.fromRGBO(18, 24, 47, 1),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 32.h,),
                  Text("Betting",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 20.sp,
                          color: Colors.white,
                          fontFamily: 'assets/font/static/Inter-Medium.ttf',
                          fontWeight: FontWeight.w500)),
                  SizedBox(height: 16.h,),
                  ListView.builder(
                    itemCount: controller.listTitle.length,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    padding: EdgeInsets.zero,
                    itemBuilder: (context, index) {
                      return Obx(() => InkWell(
                        onTap: () {
                          controller.indexSport.value = index;
                        },
                        child: Container(
                          margin: EdgeInsets.only(bottom: 2.h),
                          child: Row(
                            children: [
                              Icon(Icons.sports_soccer_outlined,color: controller.indexSport.value == index ?ColorUtils.PRIMARY_COLOR:Colors.white,),
                              SizedBox(width: 8.w,),
                              Text(controller.listTitle[index],
                                style: TextStyle(color: controller.indexSport.value == index ?ColorUtils.PRIMARY_COLOR:Colors.white),)
                            ],
                          ),
                        ),
                      ));
                    },),
                  SizedBox(height: 8.h,),
                  Text("SETTINGS", style: TextStyle(color: Colors.white54,fontSize: 12.sp,fontWeight: FontWeight.bold)),
                  SizedBox(height: 8.h,),
                  InkWell(
                    onTap: () {
                      Get.toNamed(Routes.preferencesPage);
                    },
                    child: Row(
                      children: [
                        const Icon(Icons.settings_suggest_outlined,color:Colors.white,),
                        SizedBox(width: 8.w,),
                        const Text("Preferences",
                          style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                      ],
                    ),
                  ),
                  SizedBox(height: 8.h,),
                  InkWell(
                    onTap: () {
                      Get.toNamed(Routes.automaticRefreshPage);
                    },
                    child: Wrap(
                      children: [
                        const Icon(Icons.settings_backup_restore_outlined,color:Colors.white,),
                        SizedBox(width: 8.w,),
                        const Text("Automatic Refresh",
                          style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                      ],
                    ),
                  ),
                  SizedBox(height: 8.h,),
                  InkWell(
                    onTap: () {
                      AppUtils.shared
                          .showToast("Cache has been cleared");
                      _scaffoldKey.currentState?.closeDrawer();
                    },
                    child: Wrap(
                      children: [
                        const Icon(Icons.autorenew_rounded,color:Colors.white,),
                        SizedBox(width: 8.w,),
                        const Text("Clear Cache",
                          style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                      ],
                    ),
                  ),
                  SizedBox(height: 8.h,),
                  InkWell(
                    onTap: () {
                      Get.toNamed(Routes.defaultSportPage);
                    },
                    child: Row(
                      children: [
                        const Icon(Icons.change_circle_outlined,color:Colors.white,),
                        SizedBox(width: 8.w,),
                        const Text("Default Sport",
                          style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),),
                        const Spacer(),
                        const Text("Football",
                          style: TextStyle(color:Colors.white),),
                        SizedBox(width: 8.w,),
                      ],
                    ),
                  ),
                  SizedBox(height: 8.h,),
                  InkWell(
                    onTap: () {
                      Get.toNamed(Routes.settingNotifyPage);
                    },
                    child: Row(
                      children: [
                        const Icon(Icons.notifications_active_outlined,color:Colors.white,),
                        SizedBox(width: 8.w,),
                        const Text("Notifications",
                          style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                      ],
                    ),
                  ),
                  SizedBox(height: 8.h,),
                  Text("INFO", style: TextStyle(color: Colors.white54,fontSize: 12.sp,fontWeight: FontWeight.bold)),
                  SizedBox(height: 8.h,),
                  Row(
                    children: [
                      const Icon(Icons.help,color:Colors.white,),
                      SizedBox(width: 8.w,),
                      const Text("Help",
                        style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                    ],
                  ),
                  SizedBox(height: 8.h,),
                  Row(
                    children: [
                      const Icon(Icons.lock,color:Colors.white,),
                      SizedBox(width: 8.w,),
                      const Text("Privacy and Cookies",
                        style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                    ],
                  ),
                  SizedBox(height: 8.h,),
                  Row(
                    children: [
                      const Icon(Icons.cookie_outlined,color:Colors.white,),
                      SizedBox(width: 8.w,),
                      const Text("Consent Preferences",
                        style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                    ],
                  ),
                  SizedBox(height: 8.h,),
                  Row(
                    children: [
                      const Icon(Icons.contact_phone_sharp,color:Colors.white,),
                      SizedBox(width: 8.w,),
                      const Text("Tell a Friend",
                        style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                    ],
                  ),
                  SizedBox(height: 8.h,),
                  Row(
                    children: [
                      const Icon(Icons.chat_outlined,color:Colors.white,),
                      SizedBox(width: 8.w,),
                      const Text("Contact Us",
                        style: TextStyle(color:Colors.white,fontWeight: FontWeight.bold),)
                    ],
                  ),
                ],
              ),
            ),
          ),
          body:Stack(
            children: [
              Container(
                child: listWidget.elementAt(controller.currentIndex.value ),
              ),
              Positioned(
                  bottom: 8.h,
                  right: Platform.isAndroid?0:16.w,
                  left: Platform.isAndroid?0:16.w,
                  child: const BannerAdContainer())
            ],
          ),
          bottomNavigationBar:Theme(data: Theme.of(context).copyWith(
            canvasColor: Colors.transparent,
          ),
              child:  Container(
                decoration: const BoxDecoration(

                  border: Border(
                    top: BorderSide(color: Colors.white54),
                  ),),
                child: BottomNavigationBar(
                    elevation: 5,
                    selectedItemColor: ColorUtils.PRIMARY_COLOR,
                    unselectedItemColor: Colors.white60,
                    items: <BottomNavigationBarItem>[
                      BottomNavigationBarItem(
                        icon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: const Icon(Icons.sports_soccer_outlined,color: Colors.white60,),
                        ),
                        activeIcon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: const Icon(Icons.sports_soccer_outlined,color: ColorUtils.PRIMARY_COLOR,),
                        ),
                        label: 'Scores',
                      ),
                      BottomNavigationBarItem(
                        icon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: const Icon(Icons.star_border_rounded,color: Colors.white60,),
                        ),
                        activeIcon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 6.h),
                          child: const Icon(Icons.star_purple500_sharp,color: ColorUtils.PRIMARY_COLOR,),
                        ),
                        label: 'Favourites',
                      ),
                      BottomNavigationBarItem(
                        icon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: const Icon(Icons.video_collection,color: Colors.white60,),
                        ),
                        activeIcon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: const Icon(Icons.video_collection,color: ColorUtils.PRIMARY_COLOR,),
                        ),
                        label: 'Watch',
                      ),
                      BottomNavigationBarItem(
                        icon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: const Icon(Icons.newspaper,color: Colors.white60,),
                        ),
                        activeIcon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: const Icon(Icons.newspaper,color: ColorUtils.PRIMARY_COLOR,),
                        ),
                        label: 'News',
                      ),
                      BottomNavigationBarItem(
                        icon: Container(
                          alignment: Alignment.center,
                          width: 24.h,
                          height: 24.h,
                          margin: EdgeInsets.only(bottom: 4.h),
                          child: RotationTransition(
                            turns: Tween(begin: 0.0, end: 1.0).animate(controller.animationController!),
                            child: const Icon(Icons.refresh),
                          ),
                        ),
                        label: 'Refresh',
                      ),
                    ],
                    currentIndex: controller.currentIndex.value ,
                    selectedLabelStyle: TextStyleUtils.sizeText12Weight500()?.copyWith(color: Colors.black),
                    unselectedLabelStyle: TextStyleUtils.sizeText12Weight500()?.copyWith(color: Colors.black),
                    showUnselectedLabels: true,
                    showSelectedLabels: true,
                    onTap: controller.onTabTapped),
              )),
        ),

      ],
    )), onWillPop: () async {
      newTime = DateTime.now();
      int difference = newTime
          .difference(oldTime)
          .inMilliseconds;
      oldTime = newTime;
      if (difference < 2000) {
        return true;
      } else {
        AppUtils.shared.showToast('touch_again_to_exit'.tr,
            backgroundColor: ColorUtils.COLOR_BLACK.withOpacity(0.5),
            textColor: ColorUtils.COLOR_WHITE);
        return false;
      }
    });
  }
  final List<Widget> listWidget = [
    ScoresPage(),
    FavouritesScreen(),
    WatchPage(),
    NewsPage(),
    Container(),
  ];

}