import 'package:betting/routes/app_pages.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../commom/utils/color_utils.dart';

import '../../../../commom/utils/toast_bettings.dart';
import 'add_competitions_controller.dart';


class AddCompetitionsPage extends GetView<AddCompetitionsController> {
  @override
  final controller = Get.put(AddCompetitionsController());

  AddCompetitionsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Obx(() => Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/background_app_betting.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        padding: EdgeInsets.only(bottom: 24.h, right: 16.w, left: 16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      height: 32.h,
                    ),
                    Row(
                      children: [
                        IconButton(onPressed: () {
                          Get.back();
                        }, icon: const Icon(Icons.arrow_back_ios_new_outlined,color: Colors.white,)),
                        Text("3 of 3", style: TextStyle(color: Colors.white54,fontSize: 14.sp)),
                        const Spacer(),
                        Visibility(
                          visible: controller.listIdCompetitionsFavourites.isEmpty,
                          child: InkWell(
                            onTap: () {
                              Get.toNamed(Routes.home);
                            },
                            child: const Text("skip", style: TextStyle(color: Colors.white54)),
                          ),)
                      ],
                    ),
                    SizedBox(
                      height: 8.h,
                    ),
                    Text("Add Competitions",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 24.sp,
                            color: Colors.white,
                            fontFamily: 'assets/font/static/Inter-Medium.ttf',
                            fontWeight: FontWeight.w500)),
                    SizedBox(
                      height: 8.h,
                    ),
                    RichText(
                      text: TextSpan(
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: Colors.white54,
                        ),
                        children: const [
                          TextSpan(
                            text: 'Tap ',
                          ),
                          WidgetSpan(
                            child: Icon(
                              Icons.star_border_rounded,
                              color: Colors.white54,
                            ),
                          ),
                          TextSpan(
                            text:
                            ' to favourite one of more competitions. These will apper at the top of your Scores tab. ',
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 12.h,
                    ),
                    SizedBox(
                      height: 30.h,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: controller.listTitle.length,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) {
                          return Obx(() => InkWell(
                            onTap: () {
                              controller.indexClick.value = index;
                              controller.changeSport();
                            },
                            child: Container(
                              margin: EdgeInsets.only(right: 8.w),
                              padding: EdgeInsets.symmetric(
                                  horizontal: 12.w, vertical: 0.h),
                              decoration: BoxDecoration(
                                  color: controller.indexClick.value == index
                                      ? Colors.white
                                      : Colors.transparent,
                                  borderRadius: BorderRadius.circular(24.r)),
                              alignment: Alignment.center,
                              child: Text(controller.listTitle[index].name!,
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color:
                                      controller.indexClick.value == index
                                          ? Colors.black
                                          : Colors.white54,
                                      fontSize: 14.sp,
                                      fontWeight: FontWeight.w600)),
                            ),
                          ));
                        },
                      ),
                    ),
                    SizedBox(
                      height: 12.h,
                    ),
                    Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(6.r)),
                      alignment: Alignment.centerLeft,
                      child: TextFormField(
                        cursorColor: Colors.black,
                        focusNode: controller.focusSearch,
                        controller: controller.textEditingControllerSearch,
                        decoration: const InputDecoration(
                          hintText: "Search teams",
                          border: InputBorder.none,
                          hintStyle: TextStyle(
                            color: Color.fromRGBO(133, 133, 133, 1),
                          ),
                          prefixIcon: Icon(
                            Icons.search_rounded,
                            color: Colors.black,
                          ),
                        ),
                        onChanged: (value){
                          controller.getListCompetitions(value);
                        },
                      ),
                    ),
                    SizedBox(
                      height: 12.h,
                    ),
                    const Text("POPULAR",
                        style: TextStyle(
                            color: Colors.white54, fontWeight: FontWeight.bold)),
                    SizedBox(
                      height: 12.h,
                    ),
                    Expanded(
                        child: Obx(() => ListView.builder(
                          controller: controller.controllerEx,
                          itemCount: controller.listCompetitionsToCategories.length,
                          shrinkWrap: true,
                          padding: EdgeInsets.zero,
                          itemBuilder: (context, index) {
                            return Obx(() => Container(
                              margin: EdgeInsets.only(bottom: 2.h),
                              padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 8.h),
                              decoration: BoxDecoration(
                                color: Colors.white10,
                                borderRadius: BorderRadius.circular(6.r),
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    height: 24.h,
                                    width: 24.h,
                                    child: const CircleAvatar(
                                      child: Icon(Icons.logo_dev_outlined),
                                    ),
                                  ),
                                  SizedBox(width: 8.w,),
                                  Expanded(child:
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(controller.listCompetitionsToCategories[index].name!.trim(),style: TextStyle(color: Colors.white,fontSize: 14.sp,fontWeight: FontWeight.bold),),
                                      Text(controller.listCompetitionsToCategories[index].country!= null ? controller.listCompetitionsToCategories[index].country!.name!.trim(): "",style: TextStyle(color: Colors.white54,fontSize: 14.sp),),
                                    ],
                                  )),
                                  InkWell(
                                    onTap: () {
                                      controller.listIsFollow[index] = !controller.listIsFollow[index];
                                      if(controller.listIsFollow[index] == true){
                                        controller.listIdCompetitionsFavourites.add(controller.listCompetitions[index].id!);
                                      }else{
                                        controller.listIdCompetitionsFavourites.removeWhere((element) => element == controller.listCompetitions[index].id!);
                                      }
                                      showToast(
                                          context,
                                          controller.listIsFollow[index] == true,
                                          "Competition favourited & notifications on",
                                          "Competition unFavourited & notifications off",
                                          const Icon(Icons.star,color: ColorUtils.PRIMARY_COLOR,),
                                          const Icon(Icons.star_border_rounded,color: Colors.black,)
                                      );
                                    },
                                    child: controller.listIsFollow[index]
                                        ?const Icon(Icons.star,color: ColorUtils.PRIMARY_COLOR,size: 30,)
                                        :const Icon(Icons.star_border_rounded,color: Colors.white,size: 30),
                                  )
                                ],
                              ),
                            ));
                          },)))
                  ],
                )),
            SizedBox(
              height: 16.h,
            ),
            Obx(() => SizedBox(
              width: double.infinity,
              height: 32.h,
              child: ElevatedButton(
                  onPressed: () {
                    if(controller.listIsFollow.contains(true)){
                      Get.toNamed(Routes.home);
                    }
                    controller.addCompetitionsFavorites();
                  },
                  style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(6)),
                      backgroundColor: controller.listIsFollow.contains(true)== false?Colors.white10:ColorUtils.PRIMARY_COLOR),
                  child: Text(
                    "Next",
                    style: TextStyle(fontSize: 16.sp, color:controller.listIsFollow.contains(true)== false?Colors.white30: Colors.black),
                  )),
            )),
          ],
        ),
      )),
    );
  }
}
