import 'package:betting/commom/widget/cache_network_custom.dart';
import 'package:betting/commom/widget/loading_custom.dart';
import 'package:betting/data/model/res/matches/matches.dart';
import 'package:betting/view/mobile/favourites_view/widgets/toast_wiget.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import '../../../../../../commom/utils/color_utils.dart';
import '../../../../../../routes/app_pages.dart';
import '../detail_tournament_controller.dart';
import 'overview_controller.dart';

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

  OverviewTournamentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
          return (controller.isLoading.value == true)?
          const LoadingCustom() :
          SingleChildScrollView(child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 8.h,
              ),
              (controller.teams.isEmpty) ? const SizedBox() : Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "TODAY",
                    style: TextStyle(
                        color: Colors.white54,
                        fontSize: 12.sp,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 8.h,
                  ),
                  ListView.builder(
                    itemCount: controller.teams[0].matches.length,
                    shrinkWrap: true,
                    padding: EdgeInsets.zero,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      Matches item = controller.teams[0].matches[index];

                      return InkWell(
                        onTap: () {
                          Get.toNamed(Routes.detailMatchesRegions, arguments: item);
                        },
                        child: Container(
                          margin: EdgeInsets.only(bottom: 4.h),
                          padding:
                          EdgeInsets.symmetric(horizontal: 8.w, vertical: 8.h),
                          decoration: BoxDecoration(
                              color: const Color.fromRGBO(255, 255, 255, 0.1),
                              borderRadius: BorderRadius.circular(6.r)),
                          child: Row(
                            children: [
                              Column(
                                children: [
                                  Text(
                                    DateFormat('HH:mm').format(DateFormat('HH:mm:ss').parse(item.time!)),
                                    style: const TextStyle(color: Colors.white),
                                  ),
                                ],
                              ),
                              SizedBox(
                                width: 8.w,
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    children: [
                                      SizedBox(
                                        height: 18.h,
                                        width: 18.h,
                                        child: CachedNetworkImage(
                                          imageUrl: item.home!.logo ?? 'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                          placeholder: (context, url) =>  const CircularProgressIndicator(),
                                          errorWidget: (context, url, error) =>
                                              Image.network( "https://files.lms.xteldev.com/files/n1/static/img",),
                                          width: 25,
                                          height: 25,
                                        ),
                                      ),
                                      SizedBox(
                                        width: 8.w,
                                      ),
                                      Text(
                                        item.home!.name!,
                                        style: const TextStyle(color: Colors.white),
                                      ),
                                    ],
                                  ),
                                  SizedBox(
                                    height: 4.h,
                                  ),
                                  Row(
                                    children: [
                                      SizedBox(
                                          height: 18.h,
                                          width: 18.h,
                                          child: CachedNetworkImage(
                                            imageUrl: 'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                            placeholder: (context, url) =>  const CircularProgressIndicator(),
                                            errorWidget: (context, url, error) =>
                                                Image.network( "https://files.lms.xteldev.com/files/n1/static/img",),
                                            width: 25,
                                            height: 25,
                                          )
                                      ),
                                      SizedBox(
                                        width: 8.w,
                                      ),
                                      Text(item.away!.name!,style: const TextStyle(color: Colors.white),),
                                    ],
                                  )
                                ],
                              ),
                              const Spacer(),
                              GestureDetector(
                                onTap: () {
                                  item.favourite = !item.favourite!;

                                  if(item.favourite == true) {
                                    controller.addMatchesFavorites(item.sId!, index);
                                  } else {
                                    controller.deleteMatchFavorites(item.sId!, index);
                                  }

                                  CustomToast().showToast(context, 'Match', item.favourite!);
                                },
                                  child: (item.favourite == false)?
                                  const Icon(Icons.star_border_rounded, color: ColorUtils.PRIMARY_COLOR,) :
                                  const Icon(Icons.star_rounded, color: ColorUtils.PRIMARY_COLOR,),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                  SizedBox(height: 8.h,),
                  InkWell(
                    onTap: () {
                      Get.find<DetailTournamentController>().pageController.animateToPage(1,
                          duration: const Duration(seconds: 1),
                          curve: Curves.easeOutBack);
                      Get.find<DetailTournamentController>().update();
                    },
                    child: Container(
                      width: double.infinity,
                      padding: EdgeInsets.symmetric(vertical: 4.h),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.white38),
                          borderRadius: BorderRadius.all(Radius.circular(6.r))
                      ),
                      alignment: Alignment.center,
                      child: const Text("See All",style: TextStyle(color: Colors.white38)),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 8.h,),
              Text("MATCH HIGHLIGHTS", style: TextStyle(color: Colors.white54,fontSize: 12.sp,fontWeight: FontWeight.bold)),
              SizedBox(height: 8.h,),
              Container(
                height: 100.h,
                margin: EdgeInsets.symmetric(horizontal: 8.h),
                child: ListView.builder(
                  itemCount: 10,
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) {
                    return Container(
                      margin: EdgeInsets.only(right: 8.w),
                      child:  Stack(
                        children: [
                          Image.asset('assets/images/test.jpg', fit: BoxFit.fill,),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child:
                            SizedBox(
                              width: 120.w,
                              child: Text('Five talking ponts from sevilla 1-1 Roma (4 -1 on pens)', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                            ),
                          )

                        ],
                      ),

                    );
                  },),
              ),
              controller.topScores.isEmpty ? const SizedBox() : Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 8.h,),
                  Text("TOP SCORE", style: TextStyle(color: Colors.white54,fontSize: 12.sp,fontWeight: FontWeight.bold)),
                  SizedBox(height: 8.h,),
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.white54),
                      borderRadius: BorderRadius.circular(6.r)
                    ),
                    child: Column(
                      children: [
                        ListView.builder(
                          itemCount: controller.topScores.length > 5 ? 5 : controller.topScores.length,
                          shrinkWrap: true,
                          padding: EdgeInsets.zero,
                          physics: const NeverScrollableScrollPhysics(),
                          itemBuilder: (context, index) {
                            return Container(
                              margin: EdgeInsets.symmetric(vertical: 4.h),
                              padding: EdgeInsets.symmetric(vertical: 4.h),
                              alignment: Alignment.center,
                              decoration: const BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.white54))
                              ),
                              child: Row(
                                children: [
                                  SizedBox(width: 8.w,),
                                  Text('${index + 1}',style: const TextStyle(color: Colors.white54),),
                                  SizedBox(width: 8.w,),
                                  SizedBox(
                                    height: 18.h,
                                    width: 18.h,
                                    child: controller.topScores[index].team != null? CacheNetWorkCustom(urlImage: controller.topScores[index].team.logo ??
                                    'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',) : null,
                                  ),
                                  SizedBox(width: 8.w,),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(controller.topScores[index].name, style: TextStyle(color: Colors.white,fontSize: 14.sp),),
                                      Text(controller.topScores[index].teamName ?? '', style: TextStyle(color: Colors.white60,fontSize: 12.sp),),
                                    ],
                                  ),
                                  const Spacer(),
                                  Text(controller.topScores[index].goals,style: const TextStyle(color: Colors.white),),
                                  SizedBox(width: 8.w,),
                                ],
                              ),
                            );
                          },),
                        InkWell(
                          onTap: () {
                            Get.find<DetailTournamentController>().pageController.animateToPage(5,
                                duration: const Duration(seconds: 1),
                                curve: Curves.easeOutBack);

                            Get.find<DetailTournamentController>().update();
                          },
                          child: Container(
                            alignment: Alignment.center,
                            width: double.infinity,
                            child: const Text("See All",style: TextStyle(color: Colors.white54)),
                          ),
                        ),
                        SizedBox(height: 4.h,)
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(height: 8.h,),
              Text("NEWS", style: TextStyle(color: Colors.white54,fontSize: 12.sp,fontWeight: FontWeight.bold)),
              SizedBox(height: 8.h,),
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.white54),
                    borderRadius: BorderRadius.circular(6.r)
                ),
                child: Column(
                  children: [
                    ListView.builder(
                      itemCount: 2,
                      shrinkWrap: true,
                      padding: EdgeInsets.zero,
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        return Container(
                          margin: EdgeInsets.symmetric(vertical: 4.h),
                          padding: EdgeInsets.symmetric(vertical: 8.h),
                          child: Row(
                            children: [
                              SizedBox(
                                height: 60.h,
                                width: 100.w,
                                //child: CacheNetWorkCustom(urlImage: '${controller.teams[3]["logo"]}',),
                              ),
                              SizedBox(width: 8.w,),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text("Five talking ponts from sevilla 1-1 Roma (4 -1 on pens)",
                                        maxLines: 3,
                                        softWrap: true,
                                        style: TextStyle(color: Colors.white),
                                    ),
                                    SizedBox(height: 8.h,),
                                    const Text("1 mins ago",style: TextStyle(color: Colors.white54))
                                  ],
                                ),
                              )
                            ],
                          ),
                        );
                      },),
                    const Divider(color: Colors.white,),
                    InkWell(
                      onTap: () {
                        Get.find<DetailTournamentController>().pageController.animateToPage(2,
                            duration: const Duration(seconds: 1),
                        curve: Curves.easeOutBack);
                        Get.find<DetailTournamentController>().update();
                      },
                      child: Container(
                        alignment: Alignment.center,
                        width: double.infinity,
                        child: const Text("See All",style: TextStyle(color: Colors.white54)),
                      ),
                    ),
                    SizedBox(height: 4.h,)
                  ],
                ),
              ),
              SizedBox(height: 32.h,)
            ],
          ),
          );
        },
      );
  }
}
