import 'package:betting/commom/utils/textstyle.dart';
import 'package:betting/commom/widget/cache_network_custom.dart';
import 'package:betting/commom/widget/custom_native_ads.dart';
import 'package:betting/commom/widget/loading_custom.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/detail_matches_regions_controller.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/infor_matches_regions/infor_matches_regions_controller.dart';
import 'package:betting/view/mobile/home_page/home_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';

class InforMatchesRegionsPage extends GetWidget<InforMatchesRegionsController>{
  @override
  final controller = Get.put(InforMatchesRegionsController());

  @override
  Widget build(BuildContext context) {
    return
   GetBuilder<InforMatchesRegionsController>(builder: (controller) {
     return  controller.isReady.value ?
     RefreshIndicator(
       child:  SingleChildScrollView(
         physics: const ClampingScrollPhysics(),
         child: 
         Obx(() => Column(
           crossAxisAlignment:CrossAxisAlignment.start,
           children: [
             NativeAdsCustom(height: 130.h,nativeAdManager:controller.nativeAds[2] ,radius: 0.r,),
             SizedBox(height: 16.h),
             Container(
               padding:  EdgeInsets.symmetric(horizontal: 4.w, vertical: 6.h),
               decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(6),
                   border: Border.all(color: Colors.white24, width: 1)
               ),
               child: Column(
                 children: [
                   Row(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Expanded(
                           child:
                           RichText(
                             text: TextSpan(
                                 children: [
                                   const WidgetSpan(child:  Icon(CupertinoIcons.calendar, color: Colors.white24,),),
                                   TextSpan(text:
                                   ' ${controller.outputDateToDateFormat.format(DateFormat('yyyy-MM-dd').parse(controller.infoTeam.value.match!.date!))}, ${controller.outputTimeFormat.format(DateFormat('HH:mm:ss').parse(controller.infoTeam.value.match?.time??''))}' ,  style:  TextStyle(color: Colors.white24, fontSize: 12.sp, fontWeight: FontWeight.w400),)
                                 ]
                             ),
                           )
                       ),
                       SizedBox(width: 6.h),
                       Expanded(
                           child:
                           RichText(
                             text: TextSpan(
                                 children: [
                                   const WidgetSpan(child:  Icon(CupertinoIcons.tornado, color: Colors.white24,),),
                                   TextSpan(text: ' ${controller.infoTeam.value.match?.home?.stadium ?? ''}',  style:  TextStyle(color: Colors.white24, fontSize: 12.sp, fontWeight: FontWeight.w400),)
                                 ]
                             ),
                           )
                       ),
                     ],
                   ),
                   SizedBox(height: 8.h,),
                   Row(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Expanded(
                           child:
                           RichText(
                             text: TextSpan(
                                 children: [
                                   const WidgetSpan(child:  Icon(CupertinoIcons.calendar, color: Colors.white24,),),
                                   TextSpan(text: controller.infoTeam.value.match?.location?? '',  style:  TextStyle(color: Colors.white24, fontSize: 12.sp, fontWeight: FontWeight.w400),)
                                 ]
                             ),
                           )
                       ),
                       const SizedBox(width: 6,),
                       Expanded(
                           child:
                           RichText(
                             text: TextSpan(
                                 children: [
                                   const WidgetSpan(child:  Icon(CupertinoIcons.group, color: Colors.white24,size: 25,),),
                                   TextSpan(text: ' 50,000', style:  TextStyle(color: Colors.white24, fontSize: 12.sp, fontWeight: FontWeight.w400),)
                                 ]
                             ),
                           )
                       ),
                     ],
                   ),
                 ],
               ),
             ),
             SizedBox(height: 8.h),
             Text('FORM', style: TextStyle(color: Colors.white24, fontWeight: FontWeight.bold, fontSize: 14.sp),),
             SizedBox(height: 8.h),
             Container(
               width: Get.width,
               padding:  EdgeInsets.symmetric(horizontal: 8.w, vertical: 8.h),
               decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(6),
                   border: Border.all(color: Colors.white24, width: 1)
               ),
               child: Obx(() => Column(
                 children: [
                   Row(
                     mainAxisAlignment:  MainAxisAlignment.spaceBetween,
                     children: [
                       Text(controller.itemMatches.value.home?.name ?? '',
                         style: TextStyle(color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.bold),),
                       SizedBox(
                         height: 24.h,
                         child:
                         // (controller.formTeam1.isEmpty) ? null :
                         ListView.builder(
                             itemCount: controller.h2hFormTeam1.length,
                             scrollDirection: Axis.horizontal,
                             shrinkWrap: true,
                             itemBuilder: (context, index){
                               return Container(
                                 padding: EdgeInsets.all(6.h),
                                 margin:  EdgeInsets.only(left: 4.w),
                                 alignment: Alignment.center,
                                 decoration: BoxDecoration(
                                     color: controller.h2hFormTeam1[index] == 'W' ? Colors.green :
                                     controller.h2hFormTeam1[index] == 'D' ? Colors.grey : Colors.red,
                                     shape: BoxShape.circle
                                 ),
                                 child: Text(controller.h2hFormTeam1[index],
                                   style: TextStyle(fontSize: 10.sp),
                                 ),
                               );
                             }
                         ),
                       ),
                     ],
                   ),
                   SizedBox(height: 12.h),
                   SizedBox(
                     height: 36,
                     child:
                     (controller.formTeam1.isEmpty) ? Center(
                       child: Text("Dữ liệu trận đấu trống !", textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 14.sp),),
                     ) :
                     ListView.builder(
                         itemCount: controller.formTeam1.length,
                         shrinkWrap: true,
                         scrollDirection: Axis.horizontal,
                         itemBuilder: (context, index){
                           return
                             InkWell(
                               onTap: (){
                                 if(controller.formTeam1[index].ftScore != 'VIEW ALL'){
                                   controller.getInfoMatches('${controller.h2hTeam.value.team1Last6![index].sId}');
                                     if(Get.isRegistered<DetailMatchesRegionsController>()){
                                       controller.getUpdateTeam1(index);
                                     }
                                 }
                               },
                               child:  Container(
                                 alignment: Alignment.center,
                                 margin:  EdgeInsets.only(right: 8.w),
                                 padding: const EdgeInsets.symmetric(horizontal: 4),
                                 decoration: BoxDecoration(
                                     borderRadius: BorderRadius.circular(16),
                                     border: Border.all(color: Colors.white24, width: 0.8)
                                 ),
                                 child: controller.formTeam1[index].ftScore != 'VIEW ALL' ?
                                 Row(
                                   children: [
                                     Image.network(
                                       'https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png',
                                       width: 28,
                                       height: 28,
                                     ),
                                     SizedBox(width: 6.w),
                                     Text(
                                       controller.formTeam1[index].ftScore!,
                                       style: TextStyleUtils.sizeText11Weight600()!
                                           .copyWith(color: Colors.white70),
                                     ),
                                     SizedBox(width: 6.w),
                                     Image.network(
                                       'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                       width: 28,
                                       height: 28,
                                     ),
                                   ],
                                 )
                                     :  Text(
                                   'View All',
                                   style: TextStyleUtils.sizeText12Weight400()!
                                       .copyWith(color: Colors.white70),
                                 ),
                               ),
                             );
                         }),
                   ),
                   SizedBox(height: 16.h,),
                   Row(
                     mainAxisAlignment:  MainAxisAlignment.spaceBetween,
                     children: [
                       Text(controller.itemMatches.value.away?.name ?? '', style:  TextStyle(color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.bold),),
                       SizedBox(
                         height: 24.h,
                         child:
                         // (controller.formTeam2.isEmpty) ? null :
                         ListView.builder(
                             itemCount: controller.h2hFormTeam2.length,
                             scrollDirection: Axis.horizontal,
                             shrinkWrap: true,
                             itemBuilder: (context, index){
                               return Container(
                                 padding: EdgeInsets.all(6.h),
                                 margin:  EdgeInsets.only(left: 4.w),
                                 alignment: Alignment.center,
                                 decoration: BoxDecoration(
                                     color: controller.h2hFormTeam2[index] == 'W' ?
                                     Colors.green : controller.h2hFormTeam2[index] == 'D' ? Colors.grey : Colors.red,
                                     shape: BoxShape.circle
                                 ),
                                 child: Text(controller.h2hFormTeam2[index],
                                   style: TextStyle(fontSize: 10.sp),
                                 ),
                               );
                             }
                         ),
                       ),
                     ],
                   ),
                   SizedBox(height: 12.h),
                   SizedBox(
                     height: 36,
                     child: (controller.formTeam2.isEmpty) ?
                     Center(
                       child: Text("Dữ liệu trận đấu trống !", textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 14.sp),),
                     ) :
                     ListView.builder(
                         itemCount: controller.formTeam2.length,
                         shrinkWrap: true,
                         scrollDirection: Axis.horizontal,
                         itemBuilder: (context, index){
                           return
                             InkWell(
                               onTap: (){
                                 if(controller.formTeam2[index].ftScore != 'VIEW ALL'){
                                   controller.getInfoMatches('${controller.h2hTeam.value.team2Last6![index].sId}');
                                   if(Get.isRegistered<DetailMatchesRegionsController>()){
                                     controller.getUpdateTeam2(index);
                                   }

                                 }
                               },
                               child: Container(
                                 alignment: Alignment.center,
                                 margin:  EdgeInsets.only(right: 8.w),
                                 padding: const EdgeInsets.symmetric(horizontal: 4),
                                 decoration: BoxDecoration(
                                     borderRadius: BorderRadius.circular(16),
                                     border: Border.all(color: Colors.white24, width: 0.8)
                                 ),
                                 child: controller.formTeam2[index].ftScore != 'VIEW ALL' ?
                                 Row(
                                   children: [
                                     Image.network(
                                       'https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png',
                                       width: 28,
                                       height: 28,
                                     ),
                                     SizedBox(width: 6.w),
                                     Text(
                                       controller.formTeam2[index].ftScore!,
                                       style: TextStyleUtils.sizeText11Weight600()!
                                           .copyWith(color: Colors.white70),
                                     ),
                                     SizedBox(width: 6.w),
                                     Image.network(
                                       'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                       width: 28,
                                       height: 28,
                                     ),
                                   ],
                                 ) :  Text(
                                   'View All',
                                   style: TextStyleUtils.sizeText12Weight400()!
                                       .copyWith(color: Colors.white70),
                                 ),
                               ),
                             );
                         }),
                   ),
                 ],
               ),
               ),
             ),
             SizedBox(
               height: 10.h,
             ),
             Container(
               alignment: Alignment.topLeft,
               padding: const EdgeInsets.symmetric(horizontal: 15),
               child: Text(
                 'NEWS',
                 style: TextStyleUtils.sizeText12Weight500()!
                     .copyWith(color: Colors.white70),
               ),
             ),
             SizedBox(
               height: 8.h,
             ),
             Container(
               margin: const EdgeInsets.symmetric(horizontal: 10),
               decoration: BoxDecoration(
                 border: Border.all(color: Colors.white30, width: 0.5),
                 borderRadius: const BorderRadius.only(
                     topRight: Radius.circular(8), topLeft: Radius.circular(8)),
               ),
               child: ListView.builder(
                 physics: const NeverScrollableScrollPhysics(),
                 shrinkWrap: true,
                 itemCount: 2,
                 itemBuilder: (context, index) {
                   return Container(
                     padding: const EdgeInsets.all(8),
                     width: Get.width,
                     height: 100,
                     margin: const EdgeInsets.only(top: 10),
                     child: Row(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
                         ClipRRect(
                           borderRadius:
                           const BorderRadius.all(Radius.circular(8)),
                           child: Image.network(
                             'https://img.chelseafc.com/image/upload/f_auto,ar_16:9,w_500,c_fill,g_auto,q_90/editorial/women\'s-team/WSL_Goal_of_the_Season_June_2023.jpg',
                             width: 100,
                             height: 100,
                             fit: BoxFit.cover,
                           ),
                         ),
                         const SizedBox(
                           width: 10,
                         ),
                         Expanded(
                           child: Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
                               Text(
                                   'On this day 2014: Lampard announces his Chelsea departureOn this day 2014: Lampard announces his Chelsea departure',
                                   textAlign: TextAlign.left,
                                   overflow: TextOverflow.ellipsis,
                                   style: TextStyleUtils.sizeText14Weight500()
                                       ?.copyWith(
                                       height: 1.3, color: Colors.white),
                                   maxLines: 3),
                               const SizedBox(
                                 height: 2,
                               ),
                               Text('1 days ago',
                                   style: TextStyleUtils.sizeText10Weight400()
                                       ?.copyWith(color: Colors.white60))
                             ],
                           ),
                         ),
                       ],
                     ),
                   );
                 },
               ),
             ),
             GestureDetector(
               onTap: () {
                 // teamInfoController.tabController.animateTo(3,);
               },
               child: Container(
                 alignment: Alignment.center,
                 padding: const EdgeInsets.all(8),
                 margin: const EdgeInsets.symmetric(horizontal: 10),
                 width: double.infinity,
                 decoration: BoxDecoration(
                   border: Border.all(color: Colors.white30, width: 0.5),
                   borderRadius: const BorderRadius.only(
                     bottomLeft: Radius.circular(8),
                     bottomRight: Radius.circular(8),
                   ),
                 ),
                 child: Text(
                   'See All',
                   style: TextStyleUtils.sizeText13Weight400()!
                       .copyWith(color: Colors.white),
                 ),
               ),
             ),

             const SizedBox(
               height: 10,
             ),
             Container(
               alignment: Alignment.topLeft,
               padding: const EdgeInsets.symmetric(horizontal: 15),
               child: Text(
                 'TABLE',
                 style: TextStyleUtils.sizeText12Weight500()!
                     .copyWith(color: Colors.white70),
               ),
             ),
             const SizedBox(
               height: 8,
             ),
             Column(
               children: [
                 Container(
                   padding: EdgeInsets.symmetric(vertical: 8.h,),
                   margin: const EdgeInsets.symmetric(horizontal: 10),
                   decoration: BoxDecoration(
                       border: Border.all(width: 1, color: const Color.fromRGBO(255, 255, 255, 0.1)),
                       borderRadius: const BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8))
                   ),
                   child:  Row(
                     children: [
                       Container(
                         width: 40.w,
                         alignment: Alignment.center,
                         child:  Text("#",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
                       ),
                       SizedBox(
                         width: 40.w,
                         child:  Text("TEAM",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                       ),
                       const Spacer(),
                       Container(
                         width: 40.w,
                         alignment: Alignment.center,
                         child:  Text("P",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                       ),
                       Container(
                         width: 40.w,
                         alignment: Alignment.center,
                         child:  Text("GD",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                       ),
                       Container(
                         alignment: Alignment.center,
                         width: 40.w,
                         child:  Text("PTS",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                       ),
                     ],
                   ),
                 ),
                 ListView.builder(
                   shrinkWrap: true,
                   padding: EdgeInsets.zero,
                   physics: const NeverScrollableScrollPhysics(),
                   itemCount: 3,
                   itemBuilder: (context, index) {
                     return GestureDetector(
                       onTap: () {
                         // Navigator.push(context, MaterialPageRoute(builder: (context) => const TeamsInfoView(),));
                       },
                       child: Container(
                         padding: EdgeInsets.symmetric(vertical: 8.h,),
                         margin: const EdgeInsets.symmetric(horizontal: 10),
                         decoration: BoxDecoration(
                           border: Border.all(width: 0.5, color: const Color.fromRGBO(255, 255, 255, 0.1)),
                         ),
                         child: Row(
                           crossAxisAlignment: CrossAxisAlignment.center,
                           children: [
                             Container(
                               width: 40.w,
                               alignment: Alignment.center,
                               child: Text("${index +1}",style:  TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                             ),
                             SizedBox(
                               height: 18.h,
                               width:18.h,
                               child: const CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png',),
                             ),
                             SizedBox(width: 8.w,),
                             Text("Manchester United",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp)),
                             const Spacer(),
                             Container(
                               width: 40.w,
                               alignment: Alignment.center,
                               child:  Text("38",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                             ),
                             Container(
                               width: 40.w,
                               alignment: Alignment.center,
                               child:  Text("99",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                             ),
                             Container(
                               alignment: Alignment.center,
                               width: 40.w,
                               child:  Text("90",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                             ),
                           ],
                         ),
                       ),
                     );
                   },)
               ],
             ),
             GestureDetector(
               onTap: () {
                 // teamInfoController.tabController.animateTo(2);
               },
               child: Container(
                 alignment: Alignment.center,
                 padding: const EdgeInsets.all(8),
                 margin: const EdgeInsets.symmetric(horizontal: 10),
                 width: double.infinity,
                 decoration: BoxDecoration(
                   border: Border.all(color: Colors.white30, width: 0.5),
                   borderRadius: const BorderRadius.only(
                     bottomLeft: Radius.circular(8),
                     bottomRight: Radius.circular(8),
                   ),
                 ),
                 child: Text(
                   'See All',
                   style: TextStyleUtils.sizeText13Weight400()!
                       .copyWith(color: Colors.white, fontSize: 12.sp),
                 ),
               ),
             ),


             const SizedBox(
               height: 10,
             ),
             Container(
               alignment: Alignment.topLeft,
               padding: const EdgeInsets.symmetric(horizontal: 15),
               child: Text(
                 'VIDEOS',
                 style: TextStyleUtils.sizeText12Weight500()!
                     .copyWith(color: Colors.white70),
               ),
             ),
             const SizedBox(
               height: 8,
             ),
             SizedBox(
               width: double.infinity,
               height: 120,
               child: ListView.builder(
                 scrollDirection: Axis.horizontal,
                 shrinkWrap: true,
                 itemCount: 5,
                 itemBuilder: (context, index) {
                   return Container(
                     margin: const EdgeInsets.only(left: 10),
                     width: 220,
                     child: Stack(
                       children: [
                         ClipRRect(
                           borderRadius:
                           const BorderRadius.all(Radius.circular(8)),
                           child: Image.network(
                               'https://img.chelseafc.com/image/upload/f_auto,ar_16:9,w_500,c_fill,g_auto,q_90/video/2023/05/26/1-1_CHE_NEWC.png'),
                         ),
                         Column(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [
                             Container(
                               margin: const EdgeInsets.only(top: 10, right: 20),
                               alignment: Alignment.topRight,
                               child: Row(
                                 crossAxisAlignment: CrossAxisAlignment.center,
                                 mainAxisAlignment: MainAxisAlignment.end,
                                 children: [
                                   Container(
                                     padding:
                                     const EdgeInsets.symmetric(horizontal: 8),
                                     decoration: BoxDecoration(
                                       color: Colors.white12,
                                       borderRadius: BorderRadius.circular(8),
                                     ),
                                     child: Row(
                                       mainAxisAlignment: MainAxisAlignment.center,
                                       children: [
                                         const Icon(
                                           Icons.play_arrow_rounded,
                                           color: Colors.white70,
                                         ),
                                         Text(
                                           '1:55',
                                           style: TextStyleUtils
                                               .sizeText12Weight500()!
                                               .copyWith(color: Colors.white70),
                                         ),
                                       ],
                                     ),
                                   ),
                                 ],
                               ),
                             ),
                             Container(
                               width: double.infinity,
                               padding: const EdgeInsets.all(10),
                               alignment: Alignment.bottomCenter,
                               child: Text('Lampard end-of-season-exclusive',
                                   style: TextStyleUtils.sizeText13Weight500()!
                                       .copyWith(color: Colors.white),
                                   maxLines: 3,
                                   softWrap: true,
                                   overflow: TextOverflow.ellipsis,
                                   textAlign: TextAlign.start),
                             ),
                           ],
                         ),
                       ],
                     ),
                   );
                 },
               ),
             ),



           ],
         )),
       ),
       onRefresh: () async {
         Get.find<HomeController>().onRefreshPressed();

       },): const LoadingCustom();
   },);
  }
}