import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/view/mobile/find/detail_player/detail_stats/stats_player_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class StatsPlayerPage extends GetWidget<StatsPlayerController>{
  final controller = Get.put(StatsPlayerController());

  @override
  Widget build(BuildContext context) {
    return
     SingleChildScrollView(
       child:  Column(
         children: [
           Row(
             children: [
               Expanded(
                 flex: 2,
                 child: IntrinsicWidth(
                 child: Container(
                   padding: EdgeInsets.symmetric(horizontal: 12.w,vertical: 2.h),
                   height: 24.h,
                   decoration: BoxDecoration(
                       border: Border.all(
                           color: const Color.fromRGBO(192, 192, 192, 1)),
                       borderRadius: BorderRadius.circular(8)),
                   child: Theme(
                     data: Theme.of(context).copyWith(
                       canvasColor: Colors.white,
                     ),
                     child:
                     DropdownButtonHideUnderline(
                       child: DropdownButton(
                         isExpanded: true,
                         iconSize: 0,
                         icon: const Visibility(
                             visible: false,
                             child: Icon(Icons.arrow_downward)),
                         elevation: 16,
                         hint:  controller.stage.value != ""
                             ? Row(
                           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: 16, height: 16,),
                                   const SizedBox(width: 4,),
                                   Text(controller.stage.value, style:  TextStyle(color: ColorUtils.PRIMARY_COLOR, fontSize: 10.sp, fontWeight: FontWeight.bold,)),
                                 ]
                             ),
                             SizedBox(width: 100.w,),
                             const Icon(
                               Icons.keyboard_arrow_down,
                               color: Colors.white,
                               size: 18,
                             )
                           ],
                         )
                             : Row(
                           children: [
                             Text(
                               'All Stages',
                               style: TextStyle(
                                   fontSize: 14.sp,
                                   fontWeight: FontWeight.w400,
                                   color: Colors.black),
                             ),
                             SizedBox(width: 50.w,),
                             const Icon(
                               Icons.keyboard_arrow_down,
                               color: Colors.white,
                               size: 18,
                             )
                           ],
                         ),
                         items: [
                           'All Stages',
                           'Final',
                           'Semi Finals',
                         ].map(
                               (value) {
                             return DropdownMenuItem<String>(
                                 value: value,
                                 child:  Column(
                                   children: [
                                     Container(
                                       padding: const EdgeInsets.all(6),
                                       child:
                                       Row(
                                           children: [
                                             Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/a/a1/Man_Utd_FC_.svg/1200px-Man_Utd_FC_.svg.png', width: 16, height: 16,),
                                              SizedBox(width: 4.h,),
                                             Text(value, style:  TextStyle(color: Colors.black45, fontSize: 10.sp, fontWeight: FontWeight.w500,)),
                                           ]
                                       ),
                                     ),
                                     const Divider(),
                                   ],
                                 )
                             );
                           },
                         ).toList(),
                         onChanged: (String? value) {
                         },
                       ),
                     ),
                   ),
                 ),
               ),),
               SizedBox(width:8.w,),
               Expanded(
                 flex: 1,
                 child: IntrinsicWidth(
                 child: Container(
                   padding: EdgeInsets.symmetric(horizontal: 12.w,vertical: 2.h),
                   height: 24.h,
                   decoration: BoxDecoration(
                       border: Border.all(
                           color: const Color.fromRGBO(192, 192, 192, 1)),
                       borderRadius: BorderRadius.circular(8)),
                   child: Theme(
                     data: Theme.of(context).copyWith(
                       canvasColor: Colors.white,
                     ),
                     child:
                     DropdownButtonHideUnderline(
                       child: DropdownButton(
                         isExpanded: true,
                         iconSize: 0,
                         icon: const Visibility(
                             visible: false,
                             child: Icon(Icons.arrow_downward)),
                         elevation: 16,
                         hint:  controller.stage.value != ""
                             ? Row(
                           children: [
                             Text(
                               controller.stage.value,
                               style: TextStyle(
                                   fontSize: 10.sp,
                                   fontWeight: FontWeight.w400,
                                   color: ColorUtils.PRIMARY_COLOR),
                             ),
                             SizedBox(width: 16.w,),
                              Icon(
                               Icons.keyboard_arrow_down,
                               color: Colors.white,
                               size: 18.sp,
                             )
                           ],
                         )
                             : Row(
                           children: [
                             Text(
                               'All Stages',
                               style: TextStyle(
                                   fontSize: 14.sp,
                                   fontWeight: FontWeight.w400,
                                   color: Colors.black),
                             ),
                             SizedBox(width: 50.w,),
                             const Icon(
                               Icons.keyboard_arrow_down,
                               color: Colors.white,
                               size: 18,
                             )
                           ],
                         ),
                         items: [
                           'All Stages',
                           'Final',
                           'Semi Finals',
                         ].map(
                               (value) {
                             return DropdownMenuItem<String>(
                                 value: value,
                                 child:Text(value, style: TextStyle(color: ColorUtils.PRIMARY_COLOR,fontWeight: FontWeight.bold, fontSize: 12.sp),)
                             );
                           },
                         ).toList(),
                         onChanged: (String? value) {
                         },
                       ),
                     ),
                   ),
                 ),
               ),
               ),
             ],
           ),
           ListView.builder(
               itemCount: controller.stats.length,
               shrinkWrap: true,
               physics: const NeverScrollableScrollPhysics(),
               itemBuilder: (context,index){
                 return
                   Column(
                     children: [
                      Container(
                        padding:  EdgeInsets.symmetric(vertical: 8.h),
                        child:  Row(
                          children: [
                            Expanded(
                              flex:3,
                              child: Text('${controller.stats[index]['title']}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14.sp),),),
                        Expanded(
                            flex: 1,
                            child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            SizedBox(
                              width: 40.w,
                              child: Text('Team Rank', style:  TextStyle(color: Colors.white, fontWeight: FontWeight.normal, fontSize: 12.sp),),
                            ),
                            SizedBox(
                              width: 40.w,
                              child: Text('Comp Rank', style:  TextStyle(color: Colors.white, fontWeight: FontWeight.normal, fontSize: 12.sp),),
                            )
                          ],
                        ))

                          ],
                        ),
                      ),
                       Container(
                         decoration: BoxDecoration(
                             borderRadius: BorderRadius.circular(6),
                             border: Border.all(color: Colors.white, width: 1)
                         ),
                         width: double.infinity,
                         child:Row(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
                             Expanded(
                               flex: 3,
                               child:
                               Container(
                                 padding:  EdgeInsets.symmetric(horizontal: 10.w),
                                 child: ListView.builder(
                                     physics: const NeverScrollableScrollPhysics(),
                                     shrinkWrap: true,
                                   itemCount: controller.stats[index]['item'].length,
                                     itemBuilder: (context, indexItem){
                                   return
                                    Container(
                                      margin: EdgeInsets.symmetric(vertical: 16.h),
                                      child:  Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text('${controller.stats[index]['item'][indexItem]['name']}', style:  TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.w300),),
                                          Text('${controller.stats[index]['item'][indexItem]['count']}', style:  TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),

                                        ],
                                      ),
                                    );
                                 })
                               )),
                             Container(
                               height:double.parse('${controller.stats[index]['item'].length*56.h}'),
                               width: 1,
                               color: Colors.white,
                             ),
                             Expanded(
                                 flex:1,
                                 child:
                             Container(
                               padding:  EdgeInsets.symmetric( horizontal: 10.w),
                               child: ListView.builder(
                                   shrinkWrap: true,
                                   physics: const NeverScrollableScrollPhysics(),
                                   itemCount: controller.stats[index]['item'].length,
                                   itemBuilder: (context, indexItem){
                                     return  Container(
                                       margin:  EdgeInsets.symmetric(vertical: (16.h)),
                                       child:        Row(
                                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                         children: [
                                           Text('${controller.stats[index]['item'][indexItem]['teamRank']}', style:  TextStyle(color: Colors.white, fontWeight: FontWeight.w400, fontSize: 14.sp),),
                                           Text('${controller.stats[index]['item'][indexItem]['compRank']}', style:  TextStyle(color: Colors.white, fontWeight: FontWeight.w400, fontSize: 14.sp),),

                                         ],
                                       ),
                                     );

                                   }),))




                           ],
                         ),
                       )
                     ],
                   );


               })
         ],
       ),
     );
  }
}