import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/commom/utils/textstyle.dart';
import 'package:betting/commom/utils/toast_bettings.dart';
import 'package:betting/commom/widget/cache_network_custom.dart';
import 'package:betting/routes/app_pages.dart';
import 'package:betting/view/mobile/find/find_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class FindPage extends GetWidget<FindController>{
  final controller = Get.put(FindController());

  @override
  Widget build(BuildContext context) {
    return 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,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            automaticallyImplyLeading: false,
            bottom: PreferredSize(
                preferredSize: const Size.fromHeight(0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      icon: const Icon(
                        Icons.arrow_back_ios_new_rounded,
                        size: 18,
                        color: Colors.white54,
                      ),
                      onPressed: () {
                        Get.back();
                      },
                    ),
                    Expanded(
                      child: TextField(
                        cursorColor: ColorUtils.PRIMARY_COLOR,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: 'Search',
                          hintStyle: TextStyleUtils.sizeText14Weight300()!
                              .copyWith(color: Colors.white54),
                        ),
                        style: TextStyleUtils.sizeText14Weight300()!
                            .copyWith(color: Colors.white),
                      ),
                    ),
                  ],
                )),
          ),
          body:
          SingleChildScrollView(
            child:
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                children: [
                  const Divider(color: Colors.white,),
                  SizedBox(
                    height: 32,
                    child: ListView.builder(
                        itemCount: controller.list2.length,
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index){
                          return
                            InkWell(
                              onTap: (){
                                controller.indexChange.value = index;
                              },
                              child:
                              Obx(() =>  Container(
                                decoration: BoxDecoration(
                                    color: controller.indexChange.value == index ? ColorUtils.boldWhiteColor: Colors.black,
                                    border: Border.all(
                                        color: Colors.white24,
                                        width: 1
                                    ),
                                    borderRadius: BorderRadius.circular(24)
                                ),
                                padding:  const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
                                margin: const EdgeInsets.symmetric(horizontal: 8),
                                child: Text('${controller.list2[index].name}', style: TextStyle(color:controller.indexChange.value == index?ColorUtils.COLOR_BLACK :  ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.w500),),
                              )),
                            );
                        }),
                  ),
                  const SizedBox(height: 16,),
                  ListView.builder(
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: controller.list1.length,
                      shrinkWrap: true,
                      itemBuilder: (context , index){
                        return
                          Obx(() =>
                              Column(
                                children: [
                                  const SizedBox(height: 8,),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text('${controller.list1[index]['name']}', style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                                      const Icon(Icons.navigate_next_outlined, color: Colors.white,),
                                    ],
                                  ),
                                  SizedBox(
                                    height: 8.h,
                                  ),
                                  ListView.builder(
                                      physics: const NeverScrollableScrollPhysics(),
                                      shrinkWrap: true,
                                      itemCount: controller.list1[index]['club'].length,
                                      itemBuilder: (context,indexItem){
                                        return
                                          InkWell(
                                              onTap: (){
                                                if(index ==1){
                                                  Get.toNamed(Routes.listRegionsPage);
                                                }else if(index == 2){
                                                  Get.toNamed(Routes.detailPlayer);
                                                }else{
                                                }
                                              },
                                              child:
                                              Container(
                                                margin: const EdgeInsets.only(top: 4),
                                                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                                                decoration: BoxDecoration(
                                                    borderRadius: BorderRadius.circular(6),
                                                    color:Colors.white10
                                                ),
                                                child:
                                                Obx(() => Row(
                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                  children: [
                                                    Row(
                                                      children: [
                                                        SizedBox(
                                                            width: 24,
                                                            height: 24,
                                                            child: CacheNetWorkCustom(urlImage: "${controller.list1[index]['club'][indexItem]['image']}")
                                                        ),
                                                        SizedBox(width: 8.w,),
                                                        Column(
                                                          crossAxisAlignment: CrossAxisAlignment.start,
                                                          children: [
                                                            Text('${controller.list1[index]['club'][indexItem]['nameClub']}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14.sp),),
                                                            Text('${controller.list1[index]['club'][indexItem]['rerigon']}', style: TextStyle(color: ColorUtils.COLOR_TEXT_GREY, fontWeight: FontWeight.w300, fontSize: 10.sp),),
                                                          ],
                                                        ),
                                                      ],
                                                    ),

                                                    InkWell(
                                                      onTap: (){
                                                        controller.list1[index]['club'][indexItem]['isFollow'] =! controller.list1[index]['club'][indexItem]['isFollow'];
                                                        controller.list1.refresh();
                                                        controller.list1[index]['club'][indexItem]['isFollow']==true?
                                                        Get.bottomSheet(
                                                            GestureDetector(
                                                              onTap: (){
                                                                showToast(
                                                                  context,
                                                                  controller.list1[index]['club'][indexItem]['isFollow']==true,
                                                                  "Team favourited & notifications on",
                                                                  "Team unFavourited & notifications off",
                                                                  const Icon(Icons.star,color: ColorUtils.PRIMARY_COLOR,),
                                                                  const Icon(Icons.star_border_rounded,color: Colors.black,),

                                                                );
                                                              },
                                                              child:
                                                              IntrinsicHeight(
                                                                child:  Container(
                                                                  padding: const EdgeInsets.symmetric(horizontal: 16),
                                                                  decoration: const BoxDecoration(
                                                                      color: ColorUtils.BG_BASE_BLACK2,
                                                                      borderRadius: BorderRadius.only(topRight: Radius.circular(12), topLeft: Radius.circular(12))
                                                                  ),

                                                                  child: Column(
                                                                    children: [
                                                                      SizedBox(height: 8.h),
                                                                      Container(
                                                                        height: 5.h,
                                                                        width: 50.w,
                                                                        decoration: BoxDecoration(
                                                                            color: Colors.black,
                                                                            borderRadius: BorderRadius.circular(40)
                                                                        ),
                                                                      ),
                                                                      SizedBox(height: 16.h),
                                                                      Text('Push Notifications', style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.w500),),
                                                                      Text('Select the types of notifications you would like to receive for ${controller.list1[index]['name']}', style: TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.w500),),
                                                                      SizedBox(height: 32.h,),
                                                                      Row(
                                                                        children: [
                                                                          const Icon(Icons.sports_soccer_outlined, color:Colors.grey),
                                                                          SizedBox(width: 8.w),
                                                                          Column(
                                                                            crossAxisAlignment: CrossAxisAlignment.start,
                                                                            children: [
                                                                              Text('Match Alerts', style:  TextStyle(color:Colors.white, fontWeight: FontWeight.bold, fontSize: 12.sp),),
                                                                              const SizedBox(height: 4,),
                                                                              Text('Get instant notifications for ${controller.list1[index]['name']}', style: TextStyle(color: Colors.grey, fontSize: 10.sp, fontWeight: FontWeight.w300),)
                                                                            ],
                                                                          ),
                                                                          const Spacer(),
                                                                          Obx(() =>
                                                                              SizedBox(
                                                                                child:
                                                                                Transform.scale(scale: 0.6, child: CupertinoSwitch(
                                                                                    activeColor: ColorUtils.PRIMARY_COLOR,
                                                                                    value: controller.isMatch.value,
                                                                                    onChanged:(value){
                                                                                  controller.isMatch.value =! controller.isMatch.value;
                                                                                }),),
                                                                              )
                                                                          )
                                                                        ],
                                                                      ),
                                                                      const SizedBox(height: 32,),
                                                                      Row(
                                                                        children: [
                                                                          const Icon(Icons.newspaper, color:Colors.grey),
                                                                          const SizedBox(width: 8,),
                                                                          Column(
                                                                            crossAxisAlignment: CrossAxisAlignment.start,
                                                                            children: [
                                                                              Text('Team News', style:  TextStyle(color:Colors.white, fontWeight: FontWeight.bold, fontSize: 12.sp),),
                                                                              const SizedBox(height: 4,),
                                                                              Text('Get the latest ${controller.list1[index]['name']} news', style: TextStyle(color: Colors.grey, fontSize: 10.sp, fontWeight: FontWeight.w300),)
                                                                            ],
                                                                          ),
                                                                          const Spacer(),
                                                                          Obx(() =>
                                                                              SizedBox(
                                                                                child:
                                                                                Transform.scale(scale: 0.6, child: CupertinoSwitch(
                                                                                    activeColor: ColorUtils.PRIMARY_COLOR,
                                                                                    value: controller.isTeamNew.value, onChanged:(value){
                                                                                  controller.isTeamNew.value =! controller.isTeamNew.value;
                                                                                }),),
                                                                              )
                                                                          )
                                                                        ],
                                                                      ),
                                                                      const SizedBox(height: 32,),
                                                                      SizedBox(
                                                                        width: double.infinity,
                                                                        child: ElevatedButton(
                                                                            style: ElevatedButton.styleFrom(
                                                                                backgroundColor: ColorUtils.PRIMARY_COLOR,
                                                                                shape: RoundedRectangleBorder(
                                                                                    borderRadius: BorderRadius.circular(6)
                                                                                )
                                                                            ),
                                                                            onPressed: (){
                                                                              showToast(
                                                                                context,
                                                                                controller.list1[index]['club'][indexItem]['isFollow']==true,
                                                                                 controller.isMatch.value == true && controller.isTeamNew.value == false
                                                                                     ? "Team favourited on" : controller.isTeamNew.value == true&& controller.isMatch.value == false
                                                                                     ?"Team notifications on" :controller.isMatch.value == true && controller.isTeamNew.value == true
                                                                                     ?"Team favourited & notifications on":"",
                                                                                controller.isMatch.value == true && controller.isTeamNew.value == false
                                                                                    ? "Team favourited off" : controller.isTeamNew.value == true&& controller.isMatch.value == false
                                                                                    ?"Team notifications off" :controller.isMatch.value == true && controller.isTeamNew.value == true
                                                                                    ?"Team favourited & notifications off":"",
                                                                                const Icon(Icons.star,color: ColorUtils.PRIMARY_COLOR,),
                                                                                const Icon(Icons.star_border_rounded,color: Colors.black,),

                                                                              );
                                                                              Get.back();
                                                                            },
                                                                            child: Text('Done', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: 12.sp),))
                                                                        ,
                                                                      )
                                                                    ],
                                                                  ),
                                                                ),
                                                              ),
                                                            )
                                                        ):
                                                        showToast(
                                                          context,
                                                          controller.list1[index]['club'][indexItem]['isFollow']==true,
                                                          "Team favourited & notifications on",
                                                          controller.isMatch.value == true && controller.isTeamNew.value == false
                                                              ? "Team favourited off" : controller.isTeamNew.value == true&& controller.isMatch.value == false
                                                              ?"Team notifications off" :controller.isMatch.value == true && controller.isTeamNew.value == true
                                                              ?"Team favourited & notifications off":"",
                                                          const Icon(Icons.star,color: ColorUtils.PRIMARY_COLOR,),
                                                          const Icon(Icons.star_border_rounded,color: Colors.black,),

                                                        );
                                                      },
                                                      child: controller.list1[index]['club'][indexItem]['isFollow']==true ?
                                                  const Icon(Icons.star, color:ColorUtils.PRIMARY_COLOR,):  const Icon(Icons.star_border_outlined, color: Colors.white,),
                                                    )


                                                  ],
                                                )),
                                              )
                                          );
                                      })
                                ],
                              ));

                      })

                ],
              ),
            ),
          ),
        )
      ],
    );
  }

}