import 'package:betting/commom/utils/textstyle.dart';
import 'package:betting/commom/widget/cache_network_custom.dart';
import 'package:betting/commom/widget/loading_custom.dart';
import 'package:betting/view/mobile/find/list_regions/detail_regions/detail_matches_in_regions/detail_matches_regions_controller.dart';
import 'package:betting/view/mobile/find/list_regions/detail_regions/detail_matches_in_regions/infor_matches_regions/infor_matches_regions_controller.dart';
import 'package:betting/view/mobile/find/list_regions/detail_regions/detail_matches_in_regions/stats_matches_regions/stats_matches_regions_controller.dart';
import 'package:betting/view/mobile/find/list_regions/detail_regions/detail_matches_in_regions/summary_matches_regions/summary_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';

import '../h2h_matches_regions/h2h_matches_regions_controller.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: [
             Container(
               alignment: Alignment.center,
               width: double.infinity,
               height: 40,
               decoration: BoxDecoration(
                   color: CupertinoColors.white,
                   borderRadius: BorderRadius.circular(6)
               ),
               child: const Text('Quảng cáo nhá', textAlign: TextAlign.center,),
             ),
             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,),),
                                   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) ? null :
                     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>()){
                               Get.find<DetailMatchesRegionsController>().itemArgument.value.ftScore = controller.h2hTeam.value.team1Last6![index].ftScore!;
                               Get.find<DetailMatchesRegionsController>().itemArgument.value.status = controller.h2hTeam.value.team1Last6![index].status!;
                               Get.find<DetailMatchesRegionsController>().itemArgument.value.home?.name = controller.h2hTeam.value.team1Last6![index].home?.name??'';
                               Get.find<DetailMatchesRegionsController>().itemArgument.value.away?.name = controller.h2hTeam.value.team1Last6![index].away?.name??'';
                               Get.find<SummaryMatchesRegionsController>().getMatchEvent('${controller.h2hTeam.value.team1Last6![index].sId}');
                               Get.find<SummaryMatchesRegionsController>().getStats('${controller.h2hTeam.value.team1Last6![index].sId}');
                               Get.find<StatsMatchesRegionsController>().getStatsMatches('${controller.h2hTeam.value.team1Last6![index].sId}');

                               Get.find<H2hMatchesRegionsController>().getInforMatchesH2h('${controller.h2hTeam.value.team1Last6![index].sId}');
                               Get.find<H2hMatchesRegionsController>().itemMatches.value.homeName = controller.h2hTeam.value.team1Last6![index].home?.name??'';
                               Get.find<H2hMatchesRegionsController>().itemMatches.value.awayName = controller.h2hTeam.value.team1Last6![index].away?.name??'';

                               Get.find<H2hMatchesRegionsController>().itemMatches.value.home?.sId = controller.h2hTeam.value.team1Last6![index].home?.sId??'';
                               Get.find<H2hMatchesRegionsController>().itemMatches.value.away?.sId = controller.h2hTeam.value.team1Last6![index].away?.sId??'';


                               Get.find<DetailMatchesRegionsController>().itemArgument.refresh();

                               Get.find<H2hMatchesRegionsController>().update();
                               Get.find<StatsMatchesRegionsController>().update();
                               Get.find<SummaryMatchesRegionsController>().update();
                             }

                                 }
                               },
                               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 :
                         (controller.formTeam2.isEmpty) ? const SizedBox() :
                         SizedBox(
                           height: 36,
                           child: 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) ? null :
                     ListView.builder(
                         itemCount: controller.formTeam2.length,
                         shrinkWrap: true,
                         scrollDirection: Axis.horizontal,
                         itemBuilder: (context, index){
                           return 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();
   },);
  }
}