import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/view/mobile/favourites_view/competitions_view/competitions_controller.dart';
import 'package:betting/view/mobile/favourites_view/widgets/toast_wiget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'detail_tournament_controller.dart';


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

  DetailTournamentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 8.w),
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/background_app_betting.jpg"),
          fit: BoxFit.cover,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 32.h,),
          Obx(() => Row(
            children: [
              IconButton(onPressed: () {
                Get.back();
                },
                icon: const Icon(Icons.arrow_back_ios_new_outlined,size: 16,color: Colors.white,),
              ),
              const Icon(Icons.flag,color: Colors.white,),
              SizedBox(width: 4.w,),
             Expanded(child:  Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(controller.competitionName.value,
                   overflow: TextOverflow.ellipsis,
                   maxLines: 1,
                   style: TextStyle(
                     color: Colors.white,
                     fontSize: 14.sp,
                     fontWeight: FontWeight.bold,
                   ),
                 ),
                 Text("${controller.competitionName} Tournaments",
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                   style: TextStyle(color: Colors.white60,fontSize: 12.sp,
                   ),
                 ),
               ],
             )),
              Obx(() => GestureDetector(
                onTap: () {
                  var competitionController = Get.put(CompetitionsController());
                  List<String> listId = [];
                  controller.isFavourite.value = !controller.isFavourite.value;

                  if(controller.isFavourite.value == true) {
                    listId.add(controller.competitionId.value);
                    competitionController.addCompetitionsFavorites(listId, null);
                  } else {
                    competitionController.deleteCompetitionsFavorites(controller.competitionId.value);
                  }

                  CustomToast().showToast(context, 'Competitions', controller.isFavourite.value);
                },
                child: Icon(controller.isFavourite.value == true?
                Icons.star_rounded: Icons.star_border_rounded,
                  color: ColorUtils.PRIMARY_COLOR,),
              ),),
              SizedBox(width: 8.w,),
            ],
          ),),
          SizedBox(height: 16.h,),
          SizedBox(
            height: 40.h,
            child: ListView.builder(
                itemCount: controller.listTitle.length,
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context,index){
                  return GetBuilder<DetailTournamentController>(builder: (controller){
                    return TextButton(
                      style: TextButton.styleFrom(
                        splashFactory: NoSplash.splashFactory,
                      ),
                        onPressed: () {
                          controller.indexClick.value = index;
                          controller.pageController.animateToPage(index,
                              duration: const Duration(milliseconds: 500,),
                              curve: Curves.ease);
                          controller.update();
                        },
                        child: Obx(() => Text(
                          controller.listTitle[index],
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 14.sp,
                              color: controller.indexClick.value == index
                                  ? ColorUtils.PRIMARY_COLOR
                                  : const Color.fromRGBO(177, 177, 177, 1)),
                        )));
                  });
                }),
          ),
          const PreferredSize(preferredSize: Size(double.infinity, 1), child: Divider(color: Colors.white,)),
          Expanded(
              child: PageView(
                onPageChanged: (value) {
                  controller.onPageViewChange(value);
                },
                controller: controller.pageController,
                physics: const NeverScrollableScrollPhysics(),
                children: controller.listPage,
              ))
        ],
      ),
    );
  }
}
