import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/routes/app_pages.dart';
import 'package:betting/view/mobile/favourites_view/matches_view/list_fixtures/widgets/tournaments_widget.dart';
import 'package:betting/view/mobile/favourites_view/teams/team_info_view/matches_view/result_team_info/widgets/item_result_team_info.dart';
import 'package:betting/view/mobile/find/list_regions/detail_regions/detail_matches_in_regions/h2h_matches_regions/h2h_matches_regions_controller.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/widget/cache_network_custom.dart';

class H2hMatchesRegionsPage extends GetWidget<H2hMatchesRegionsController>{
  final controller = Get.put(H2hMatchesRegionsController());

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      physics: const ClampingScrollPhysics(),
      child: 
      Obx(() => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 24.h,
            margin: EdgeInsets.symmetric(horizontal: 8.w,vertical: 8.h),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: controller.listTypeTable.length,
              itemBuilder: (context, index) {
                return Obx(() => InkWell(
                  onTap: () {
                    controller.indexCLick.value = index;
                    if(controller.indexCLick.value == 1){
                     controller.getListMatchesH2hTeam1(controller.itemMatches.value.home?.sId ?? '', '', 'FINISHED');
                    }

                    if(controller.indexCLick.value == 2){
                      controller.getListMatchesH2hTeam1(controller.itemMatches.value.away?.sId ?? '', '', 'FINISHED');
                    }


                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 4.h),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: controller.indexCLick.value == index?Colors.white:Colors.transparent,
                        borderRadius: BorderRadius.circular(24.r),
                        border: Border.all(color: controller.indexCLick.value == index?Colors.transparent:Colors.white60)
                    ),
                    margin: EdgeInsets.only(right: 8.w),
                    child: Text(controller.listTypeTable[index],
                        style: TextStyle(color: controller.indexCLick.value == index?Colors.black:Colors.white60)),
                  ),));
              },),
          ),
          controller.indexCLick.value != 0 ? const SizedBox():  SizedBox(height: 8.h,),
          controller.indexCLick.value != 0 ?
          const Text(''):
          Text('SUMMARY', style:  TextStyle(color: Colors.white24, fontSize: 14.sp, fontWeight: FontWeight.bold),),
          controller.indexCLick.value != 0 ? const SizedBox():SizedBox(height: 8.h,),
          controller.indexCLick.value != 0 ? const SizedBox():  Container(
              padding:  EdgeInsets.symmetric(horizontal: 4.w, vertical: 8.h),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  border: Border.all(width: 0.8,color: Colors.white24)
              ),
              child: ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: controller.itemCount.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index){
                    return
                      Column(
                        children: [
                          Container(
                            padding: EdgeInsets.symmetric(vertical: 8.h),
                            alignment: Alignment.center,
                            child:  Text('${controller.itemCount[index]['title']}', style:  TextStyle(color: Colors.white24, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                          ),
                          const Divider(color: Colors.white24,),
                          Container(
                            margin: EdgeInsets.symmetric(horizontal: 8.w),
                            child:  Column(
                              children: [
                                Row(
                                  children: [
                                    RichText(text: TextSpan(
                                        children: [
                                          TextSpan(text:'Win', style: TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 )) ,
                                          TextSpan(text:' ${controller.itemCount[index]['win']}', style:  TextStyle(color: Colors.white, fontSize:14.sp, fontWeight: FontWeight.bold )) ,
                                        ]
                                    )),
                                    Expanded(child:    RichText(
                                        textAlign: TextAlign.center,
                                        text: TextSpan(
                                            children: [
                                              TextSpan(text:'Draws', style: TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 )) ,
                                              TextSpan(text:' ${controller.itemCount[index]['draws']}', style:  TextStyle(color: Colors.white, fontSize:14.sp, fontWeight: FontWeight.bold )) ,
                                            ]
                                        )),),
                                    RichText(

                                        text: TextSpan(
                                            children: [
                                              TextSpan(text:'Win',style: TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 )) ,
                                              TextSpan(text:' ${controller.itemCount[index]['win2']}', style:  TextStyle(color: Colors.white, fontSize:14.sp, fontWeight: FontWeight.bold )) ,
                                            ]
                                        )),

                                  ],
                                ),
                                SizedBox(height: 12.h,),
                                Row(
                                  children: [
                                    Container(
                                      height: 12,
                                      width: (MediaQuery.sizeOf(context).width-56.w)*(int.parse('${controller.itemCount[index]['win']}') / (int.parse('${controller.itemCount[index]['win']}')+ int.parse('${controller.itemCount[index]['draws']}')+ int.parse('${controller.itemCount[index]['win2']}'))),
                                      decoration:  BoxDecoration(
                                          borderRadius: BorderRadius.circular(6),
                                          color: ColorUtils.PRIMARY_COLOR
                                      ),

                                    ),
                                    SizedBox(width: 4.w,),
                                    Container(
                                      height: 12,
                                      width: (MediaQuery.sizeOf(context).width-56.w)*(int.parse('${controller.itemCount[index]['draws']}') / (int.parse('${controller.itemCount[index]['win']}')+ int.parse('${controller.itemCount[index]['draws']}')+ int.parse('${controller.itemCount[index]['win2']}'))),
                                      decoration:  BoxDecoration(
                                          borderRadius: BorderRadius.circular(6),
                                          color: Colors.white24
                                      ),

                                    ),
                                    SizedBox(width: 4.w,),
                                    Expanded(child: Container(
                                      height: 12,
                                      width: (MediaQuery.sizeOf(context).width-56.w)*(int.parse('${controller.itemCount[index]['win2']}') / (int.parse('${controller.itemCount[index]['win']}')+ int.parse('${controller.itemCount[index]['draws']}')+ int.parse('${controller.itemCount[index]['win2']}'))),
                                      decoration:  BoxDecoration(
                                          borderRadius: BorderRadius.circular(6),
                                          color: Colors.white
                                      ),
                                    )),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          const Divider(color: Colors.white24,),
                        ],
                      );
                  })
          ),
          controller.indexCLick.value != 0 ? const SizedBox(): SizedBox(height: 16.h,),
          controller.indexCLick.value != 0 ?
          const Text(''):  Text('PREVIOUS METTINGS', style:  TextStyle(color: Colors.white24, fontSize: 14.sp, fontWeight: FontWeight.bold),),
          controller.indexCLick.value != 0 ? const SizedBox(): SizedBox(height: 8.h,),
        controller.indexCLick.value != 0?
        ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: controller.listMatChesH2h.length,
          itemBuilder: (context, index) {
            return Column(
              children: [
                SizedBox(height: 10.h,),
                GestureDetector(
                  onTap: () {
                    Get.toNamed(Routes.fixturesTournament);
                  },
                  child: TournamentsWidget(
                      logo: controller.listMatChesH2h[index].logo!=null ? controller.listMatChesH2h[index].logo!: 'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                      nameTournaments: controller.listMatChesH2h[index].name!,
                      typeTournaments: controller.listMatChesH2h[index].name!),
                ),
                SizedBox(height: 10.h,),
                Container(
                    padding: const EdgeInsets.symmetric(horizontal: 8,),
                    child: ListView.builder(
                      physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: controller.listMatChesH2h[index].matches?.length,
                      itemBuilder: (context, indexMatches) {
                        return GestureDetector(
                          onTap: () {
                            Get.toNamed(Routes.detailMatchesRegions);
                          },
                          child: Obx(() {
                            int homeScore = controller.listMatChesH2h[index].matches![indexMatches].score!= null ? int.parse(controller.listMatChesH2h[index].matches![indexMatches].score!.substring(0, 1)): 0;
                            int awayScore = controller.listMatChesH2h[index].matches![indexMatches].score!= null? int.parse(controller.listMatChesH2h[index].matches![indexMatches].score![controller.listMatChesH2h[index].matches![indexMatches].score!.length - 1]): 0;

                            return Container(
                              margin: const EdgeInsets.only(bottom: 8),
                              decoration: BoxDecoration(
                                color: Colors.grey.withOpacity(0.08),
                                borderRadius: const BorderRadius.all(Radius.circular(8),),),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Expanded(
                                    child: ItemResultMatch(
                                      date: controller.listMatChesH2h[index].matches![indexMatches].matchTime!=null ?
                                      controller.outputDateFormat.format(DateFormat('yyyy-mm-dd').parse(controller.listMatChesH2h[index].matches![indexMatches].date!)):'',
                                      time : controller.listMatChesH2h[index].matches![indexMatches].status == 'FINISHED' ? 'FT': "",
                                      logoHomeTeam: controller.listMatChesH2h[index].matches![indexMatches].home!.logo ??
                                          'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                      teamHomeName: controller.listMatChesH2h[index].matches![indexMatches].home!.name!,
                                      logoAwayTeam: controller.listMatChesH2h[index].matches![indexMatches].away!.logo ??
                                          'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                      teamAwayName: controller.listMatChesH2h[index].matches![indexMatches].away!.name!,
                                      scoreHomeTeam: homeScore,
                                      scoreAwayTeam: awayScore,
                                      result: '',
                                      isHomeFavourite: controller.listMatChesH2h[index].matches![indexMatches].home!.favourite!,
                                      isAwayFavourite: controller.listMatChesH2h[index].matches![indexMatches].away!.favourite!,),
                                  ),

                                  GestureDetector(
                                      onTap: () {
                                      },
                                      child:
                                      controller.listMatChesH2h[index].matches![indexMatches].home!.name == controller.itemMatches.value.homeName!?
                                      int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(0,1)) > int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(4,5))?
                                      Container(
                                          padding: const EdgeInsets.all(10),
                                          alignment: Alignment.center,
                                          decoration: const BoxDecoration(
                                              shape: BoxShape.circle,
                                              color: Colors.green
                                          ),
                                          margin: const EdgeInsets.only(right: 8),
                                          child: const Text('W')):int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(0,1)) == int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(4,5))?
                                      Container(
                                          padding: const EdgeInsets.all(10),
                                          alignment: Alignment.center,
                                          decoration: const BoxDecoration(
                                              shape: BoxShape.circle,
                                              color: Colors.grey
                                          ),
                                          margin: const EdgeInsets.only(right: 8),
                                          child: const Text('D')):
                                      Container(
                                          padding: const EdgeInsets.all(10),
                                          alignment: Alignment.center,
                                          decoration: const BoxDecoration(
                                              shape: BoxShape.circle,
                                              color: Colors.red
                                          ),
                                          margin: const EdgeInsets.only(right: 8),
                                          child: const Text('L')) :
                                      int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(4,5)) > int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(0,1))?
                                      Container(
                                          padding: const EdgeInsets.all(10),
                                          alignment: Alignment.center,
                                          decoration: const BoxDecoration(
                                              shape: BoxShape.circle,
                                              color: Colors.green
                                          ),
                                          margin: const EdgeInsets.only(right: 8),
                                          child: const Text('W')):int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(0,1)) == int.parse( controller.listMatChesH2h[index].matches![indexMatches].ftScore!.substring(4,5))?
                                      Container(
                                          padding: const EdgeInsets.all(10),
                                          alignment: Alignment.center,
                                          decoration: const BoxDecoration(
                                              shape: BoxShape.circle,
                                              color: Colors.grey
                                          ),
                                          margin: const EdgeInsets.only(right: 8),
                                          child: const Text('D')):
                                      Container(
                                          padding: const EdgeInsets.all(10),
                                          alignment: Alignment.center,
                                          decoration: const BoxDecoration(
                                              shape: BoxShape.circle,
                                              color: Colors.red
                                          ),
                                          margin: const EdgeInsets.only(right: 8),
                                          child: const Text('L'))

                                  )
                                  ,
                                ],
                              ),
                            );
                          },
                          ),
                        );
                      },)
                ),
              ],
            );
          },
        )
            :
        ListView.builder(
              itemCount: controller.h2hMatch.length,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index){
                return Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(height: 8.h,),
                    Row(
                      children: [
                        const SizedBox(
                            width: 24,
                            height: 24,
                            child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png')
                        ),
                        const SizedBox(width: 4,),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(controller.h2hMatch[index].competition?.name?? '', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12.sp),),
                            Text('England', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w300, fontSize: 12.sp),),
                          ],
                        ),
                        const Spacer(),
                        const Icon(Icons.navigate_next_outlined, color: Colors.white,),

                      ],
                    ),
                    const SizedBox(height: 8,),
                    ListView.builder(
                        itemCount: controller.h2hMatch.length,
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemBuilder: (context, index){
                          return
                            controller.h2hMatch[index].status== 'IN PLAY' ? Container() :     InkWell(
                              onTap: (){
                              },
                              child: Container(
                                margin:  EdgeInsets.only(top: 4.h),
                                decoration: BoxDecoration(
                                    color: Colors.white10,
                                    borderRadius: BorderRadius.circular(6)
                                ),

                                padding:const EdgeInsets.all(8),
                                child: Row(
                                  children: [
                                    Column(
                                      mainAxisAlignment: MainAxisAlignment.start,
                                      children: [
                                        Text(controller.outputDateFormat.format(DateFormat('yyyy-mm-dd').parse('${controller.h2hMatch[index].date}')), style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                        SizedBox(height: 8.h,),
                                        Text(controller.h2hMatch[index].status == 'FINISHED' ? 'FT' : '${controller.h2hMatch[index].time}', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),

                                      ],
                                    ),
                                    SizedBox(width: 4.w,),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Row(
                                          children: [
                                            Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 24, height: 24,),
                                            SizedBox(width: 4.w,),

                                           Text('${controller.h2hMatch[index].homeName}', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),

                                          ],
                                        ),
                                        SizedBox(height: 8.h,),
                                        Row(
                                          children: [
                                            Image.network('https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/Manchester_City_FC_badge.svg/1200px-Manchester_City_FC_badge.svg.png', width: 24, height: 24,),
                                            SizedBox(width: 4.w,),
                                            Text('${controller.h2hMatch[index].awayName}', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),

                                          ],
                                        ),

                                      ],
                                    ),
                                    const Spacer(),
                                    Column(
                                      mainAxisAlignment: MainAxisAlignment.start,
                                      children: [

                                          Text(controller.h2hMatch[index].ftScore!.substring(0,1), textAlign: TextAlign.center,style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.white),),
                                        SizedBox(height: 8.h,),

                                     Text(controller.h2hMatch[index].ftScore!.substring(4,5),textAlign: TextAlign.center, style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.white),),

                                      ],
                                    ),


                                  ],
                                ),
                              ),
                            );

                        })
                  ],
                );
              }),
          SizedBox(height: 16.h,),





        ],
      )),
    );
  }
}