import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/stats_matches_regions/stats_matches_regions_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class StatsMatchesRegionsPage extends GetWidget<StatsMatchesRegionsController>{
  final controller = Get.put(StatsMatchesRegionsController());

  @override
  Widget build(BuildContext context) {
    return 
   Obx(() =>
      SingleChildScrollView(
        physics: const ClampingScrollPhysics(),
        child:  Column(
          children: [
            SizedBox(height: 24.h),
            Row(
              children: [
                InkWell(
                  onTap: (){
                    controller.ischaange.value= 0;
                  },
                  child:     Container(
                    padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 6.h),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(width: 1, color: Colors.white24),
                        color: controller.ischaange.value== 0 ?Colors.white :Colors.transparent
                    ),
                    child: Text('MATCH', style:  TextStyle(color:  controller.ischaange.value== 0? Colors.black :Colors.white24, fontWeight: FontWeight.bold,fontSize: 12.sp),),
                  ),
                ),
                SizedBox(width: 8.w),
                InkWell(
                  onTap: (){
                    controller.ischaange.value= 1;
                  },
                  child:     Container(
                    padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 6.h),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(width: 1, color: Colors.white24),
                        color: controller.ischaange.value== 1 ?Colors.white :Colors.transparent
                    ),
                    child: Text('1ST HALF', style:  TextStyle(color:  controller.ischaange.value== 1? Colors.black :Colors.white24, fontWeight: FontWeight.bold,fontSize: 12.sp),),
                  ),
                ),
                SizedBox(width: 8.w),
                InkWell(
                  onTap: (){
                    controller.ischaange.value= 2;
                  },
                  child:     Container(
                    padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 6.h),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(width: 1, color: Colors.white24),
                        color: controller.ischaange.value== 2 ?Colors.white :Colors.transparent
                    ),
                    child: Text('2ND HALF', style:  TextStyle(color:  controller.ischaange.value== 2? Colors.black :Colors.white24, fontWeight: FontWeight.bold,fontSize: 12.sp),),
                  ),
                ),
              ],

            ),
            const SizedBox(
              height: 24,
            ),

            Container(
                padding: EdgeInsets.symmetric(vertical: 8.h,),
                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:
                controller. itemStats.isNotEmpty?
                ListView.builder(
                  shrinkWrap: true,
                  padding: EdgeInsets.zero,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: controller. itemStats.length,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                        onTap: () {
                          // Navigator.push(context, MaterialPageRoute(builder: (context) => const TeamsInfoView(),));
                        },
                        child:
                        Column(
                          children: [
                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 16.w),
                              child: Column(
                                children: [
                                  Row(
                                    children: [
                                      Text('${controller.itemStats[index].num?? ''}', style:  TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 ),),
                                      Expanded(child: Text('${controller.itemStats[index].name}', textAlign: TextAlign.center,style:  TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 ),),),
                                      Text('${controller.itemStats[index].num1??''}', style:  TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 ),),

                                    ],
                                  ),
                                  SizedBox(height: 8.h),
                                  Row(
                                    children: [
                                      Expanded(
                                          child:  Stack(
                                            children: [
                                              Container(
                                                height: 12,
                                                decoration:  BoxDecoration(
                                                    borderRadius: BorderRadius.only(topLeft: Radius.circular(6.r), bottomLeft: Radius.circular(6.r)),
                                                    color: Colors.white24
                                                ),

                                              ),
                                              Positioned(
                                                right: 0,
                                                child:
                                                Container(
                                                  height: 12,
                                                  width:controller.itemStats[index].num!= null?
                                                  controller.itemStats[index].num==0? ((MediaQuery.sizeOf(context).width-60.w)/2):
                                                  ((MediaQuery.sizeOf(context).width-60.w)/2)*(controller.itemStats[index].num!/(controller.itemStats[index].num!+ controller.itemStats[index].num1!))
                                                      : 100,
                                                  decoration:  BoxDecoration(
                                                      borderRadius: BorderRadius.only(topLeft: Radius.circular(6.r), bottomLeft: Radius.circular(6.r)),
                                                      color: controller.itemStats[index].num!=  null ?controller.itemStats[index].num ==0 ? Colors.white38 :  controller.itemStats[index].num! >controller.itemStats[index].num1! ? ColorUtils.PRIMARY_COLOR :  Colors.white38 : Colors.white38) ,
                                                ),)
                                            ],
                                          )

                                      ),
                                      SizedBox(width: 8.w,),
                                      Expanded(
                                          child:Stack(
                                            children: [
                                              Container(
                                                height: 12,
                                                decoration:  BoxDecoration(
                                                    borderRadius: BorderRadius.only(topRight: Radius.circular(6.r), bottomRight: Radius.circular(6.r)),
                                                    color: Colors.white24
                                                ),
                                              ),
                                              Positioned(child: Container(
                                                height: 12,
                                                width:controller.itemStats[index].num1!= null?
                                                controller.itemStats[index].num1==0?
                                                ((MediaQuery.sizeOf(context).width-60.w)/2):
                                                ((MediaQuery.sizeOf(context).width-60.w)/2)*(controller.itemStats[index].num1!/ (controller.itemStats[index].num!+ controller.itemStats[index].num1!)): 100,
                                                decoration:  BoxDecoration(
                                                    borderRadius: BorderRadius.only(topRight: Radius.circular(6.r), bottomRight: Radius.circular(6.r)),
                                                    color:controller.itemStats[index].num1!= null?
                                                    controller.itemStats[index].num1==0 ?Colors.white38:
                                                    controller.itemStats[index].num1! > controller.itemStats[index].num!  ? ColorUtils.PRIMARY_COLOR :  Colors.white38:  Colors.white38
                                                ),
                                              ),)

                                            ],
                                          )
                                      )
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(height: 8.h),
                            const Divider(color: Colors.white24,)
                          ],
                        )
                    );
                  },): Center(
                  child: Text("Thống kê trận đấu trống !", textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 16.sp),),
                ),
            ),
            const SizedBox(
              height: 16,
            ),
          ],
        ),
      ));
  }
}