import 'dart:math';
import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/summary_matches_regions/summary_matches_regions_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    return
    SingleChildScrollView(
      physics: const ClampingScrollPhysics(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.white24, width: 0.8),
                borderRadius: BorderRadius.circular(6)
            ),
            child: Column(
              children: [
                Container(
                  color: Colors.black12,
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  alignment: Alignment.center,
                  child: Obx(() => Text(controller.match.value.htScore != null ? '${controller.match.value.htScore} HT' : '',
                    style:TextStyle(color: Colors.white24, fontWeight: FontWeight.bold, fontSize: 12.sp),
                  ),
                  ),
                ),
                const Divider(color: Colors.white24,),
                Obx(() => ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: controller.listEvent.length,
                      itemBuilder: (context, index){
                        return Column(
                          children: [
                            Row(
                              children: [
                                Expanded(
                                    flex: 2,
                                    child: (controller.listEvent[index].isHome == false) ? const SizedBox() : Row(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      children: [
                                        Column(
                                          crossAxisAlignment: CrossAxisAlignment.end,
                                          children: [
                                            Row(
                                              children: [
                                                SizedBox(
                                                  width: 100.w,
                                                  child: Text(controller.listEvent[index].player,
                                                    maxLines: 3,
                                                    softWrap: true,
                                                    style: TextStyle(color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                                                ),
                                                const SizedBox(width: 2,),
                                                //Text('(1 - 0)', style:  TextStyle(color: Colors.white24, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                                              ],
                                            ),
                                            controller.listEvent[index].event == 'SUBSTITUTION' && controller.listEvent[index].info != null?
                                            SizedBox(
                                              width: 100.w,
                                              child: Text(controller.listEvent[index].info,
                                                maxLines: 3,
                                                softWrap: true,
                                                style: TextStyle(color: Colors.white24, fontSize: 14.sp, fontWeight: FontWeight.w500),),
                                            ) :
                                            const SizedBox(),
                                          ],
                                        ),
                                        const SizedBox(width: 8),
                                        (controller.listEvent[index].event == 'GOAL') ?
                                        Icon(Icons.sports_soccer, color: Colors.white, size: 18.sp,) :
                                        (controller.listEvent[index].event == 'YELLOW_CARD') ?
                                        Transform.rotate(
                                            angle: 90 * pi / 180,
                                            child: const Icon(Icons.rectangle_rounded, color: Colors.yellow, size: 18,)
                                        ) : (controller.listEvent[index].event == 'RED_CARD')?
                                        Transform.rotate(
                                            angle: 90 * pi / 180,
                                            child: const Icon(Icons.rectangle_rounded, color: Colors.red, size: 18,)
                                        ) : Icon(Icons.swap_vert_rounded, color: Colors.green, size: 18.sp,),
                                      ],
                                    ),
                                ),
                                Container(
                                  alignment: Alignment.center,
                                  width: 60,
                                  child: Text('${controller.listEvent[index].time}\'', style:  TextStyle(color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.w500),),
                                ),
                                Expanded(
                                    flex: 2,
                                    child: (controller.listEvent[index].isAway == false) ? const SizedBox() :
                                    Row(
                                      crossAxisAlignment: CrossAxisAlignment.center,
                                      children: [
                                        (controller.listEvent[index].event == 'GOAL') ?
                                        Icon(Icons.sports_soccer, color: Colors.white, size: 13.sp,) :
                                        (controller.listEvent[index].event == 'YELLOW_CARD') ?
                                        Transform.rotate(
                                            angle: 90 * pi / 180,
                                            child: const Icon(Icons.rectangle_rounded, color: Colors.yellow, size: 18,)
                                        ) : (controller.listEvent[index].event == 'RED_CARD')?
                                        Transform.rotate(
                                            angle: 90 * pi / 180,
                                            child: const Icon(Icons.rectangle_rounded, color: Colors.red, size: 18,)
                                        ) : Icon(Icons.swap_vert_rounded, color: Colors.green, size: 18.sp,),
                                        const SizedBox(width: 8),
                                        Column(
                                          children: [
                                            Row(
                                              mainAxisAlignment: MainAxisAlignment.start,
                                              children: [
                                                SizedBox(
                                                  width: 100.w,
                                                  child: Text(
                                                    controller.listEvent[index].player,
                                                    maxLines: 3,
                                                    softWrap: true,
                                                    style: TextStyle(color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.bold),
                                                  ),
                                                ),
                                                const SizedBox(width: 2,),
                                                //Text('(1 - 0)', style:  TextStyle(color: Colors.white24, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                                              ],
                                            ),
                                            SizedBox(height: 5.h,),
                                            controller.listEvent[index].event == 'SUBSTITUTION' && controller.listEvent[index].info != null?
                                            SizedBox(
                                              width: 100.w,
                                              child: Text(controller.listEvent[index].info,
                                                maxLines: 3,
                                                softWrap: true,
                                                style: TextStyle(color: Colors.white24, fontSize: 14.sp, fontWeight: FontWeight.w500),),
                                            ) :
                                            const SizedBox(),
                                          ],
                                        ),
                                      ],
                                    ),
                                ),
                              ],
                            ),
                            const Divider(
                              color: Colors.white24,
                            )
                          ],
                        );
                      }),
                )
              ],
            ),
          ),
          SizedBox(height: 8.h,),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white10,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(6),
                  )
              ),
              onPressed: (){

              },
              child: Text('LIVE TEXT COMMENTARY',textAlign: TextAlign.center, style:TextStyle(color: Colors.white24, fontWeight: FontWeight.bold, fontSize: 14.sp),),
            ),
          ),
          SizedBox(height: 8.h,),
          Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 40.h,
            decoration: BoxDecoration(
                color: CupertinoColors.white,
                borderRadius: BorderRadius.circular(6)
            ),
            child: const Text('Quảng cáo nhá', textAlign: TextAlign.center,),
          ),
          SizedBox(height: 8.h,),
          Text('STATS', style:  TextStyle(color: Colors.white24, fontSize: 16.sp, fontWeight: FontWeight.bold),),
          SizedBox(height: 8.h,),
          Obx(() => (controller.listStat.isNotEmpty) ?
          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: Column(
                children: [
                  Row(
                    children: [
                      Text('${controller.listStat.firstWhere((element) => element.name == 'possesion').num}', style: TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 ),),
                      Expanded(child: Text('Posession (%)', textAlign: TextAlign.center,style:  TextStyle(color: Colors.white24, fontSize:14.sp, fontWeight: FontWeight.w500 ),),),
                      Text('${controller.listStat.firstWhere((element) => element.name == 'possesion').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: const BoxDecoration(
                                   borderRadius: BorderRadius.only(topLeft: Radius.circular(6), bottomLeft: Radius.circular(6)),
                                   color: Colors.white24
                               ),
                             ),
                             Positioned(
                               right: 0,
                               child: Container(
                                 height: 12,
                                 width: ((MediaQuery.sizeOf(context).width-36.w)/2)*controller.listStat.firstWhere((element) => element.name == 'possesion').num/100,
                                 decoration: const BoxDecoration(
                                     borderRadius: BorderRadius.only(topLeft: Radius.circular(6), bottomLeft: Radius.circular(6)),
                                     color: Colors.white38),
                               ),
                             ),
                           ],
                         ),
                       ),
                      SizedBox(width: 8.w,),
                      Expanded(
                          child:Stack(
                            children: [
                              Container(
                                height: 12,
                                decoration: const BoxDecoration(
                                    borderRadius: BorderRadius.only(topRight: Radius.circular(6), bottomRight: Radius.circular(6)),
                                    color: Colors.white24
                                ),
                              ),
                              Positioned(child: Container(
                                height: 12,
                                width: ((MediaQuery.sizeOf(context).width-36.w)/2)*controller.listStat.firstWhere((element) => element.name == 'possesion').num1/100,
                                decoration: const BoxDecoration(
                                    borderRadius: BorderRadius.only(topRight: Radius.circular(6), bottomRight: Radius.circular(6)),
                                    color: ColorUtils.PRIMARY_COLOR
                                ),
                              ),
                              ),
                            ],
                          ),
                      ),
                    ],
                  ),
                  SizedBox(height: 16.h),
                  Row(
                    children: [
                      Expanded(child:  Container(
                        alignment: Alignment.center,
                        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 6),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            border: Border.all(width: 0.8, color: Colors.white10)
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('${controller.listStat.firstWhere((element) => element.name == 'shotsOnTarget').num}',
                              style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 14.sp),
                            ),
                            const SizedBox(width: 6),
                            const SizedBox(
                              height: 20,
                              width: 12,
                             child: Icon(Icons.sports_soccer_outlined, color: Colors.green,),
                            ),
                            const SizedBox(width: 6,),
                            Text('${controller.listStat.firstWhere((element) => element.name == 'shotsOnTarget').num1}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 14.sp),),
                          ],
                        ),
                      )),
                      const SizedBox(width: 8,),
                      Expanded(child:  Container(
                        alignment: Alignment.center,
                        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 6),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            border: Border.all(width: 0.8, color: Colors.white10)
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('${controller.listStat.firstWhere((element) => element.name == 'corners').num}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 14.sp),),
                            const SizedBox(width: 6,),
                            const SizedBox(
                              height: 20,
                              width: 12,
                             child: Icon(CupertinoIcons.flag_fill, color: Colors.red,),
                            ),
                            const SizedBox(width: 6,),
                            Text('${controller.listStat.firstWhere((element) => element.name == 'corners').num1}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 14.sp),),
                          ],
                        ),
                      )),
                      const SizedBox(width: 8,),
                      Expanded(child:  Container(
                        alignment: Alignment.center,
                        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 6),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            border: Border.all(width: 0.8, color: Colors.white10)
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('${controller.listStat.firstWhere((element) => element.name == 'yellowCards').num}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 14.sp),),
                            const SizedBox(width: 6,),
                            Container(
                              height: 20,
                              width: 12,
                              decoration: BoxDecoration(
                                  color: Colors.yellow,
                                  borderRadius: BorderRadius.circular(2)
                              ),
                            ),
                            const SizedBox(width: 6,),
                            Text('${controller.listStat.firstWhere((element) => element.name == 'yellowCards').num1}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 14.sp),),
                          ],
                        ),
                      )),
                    ],
                  )
                ],
              )
            ):   Container(
            alignment: Alignment.center,
            margin: EdgeInsets.only(top: 20.h),
            child: Text("Dữ liệu trận đấu trống !", textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 16.sp),),
          ),
          ),
          const SizedBox(height: 16,),
        ],
      ),
    );
  }
}