import 'package:betting/commom/utils/color_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../../commom/widget/cache_network_custom.dart';
import 'matches_player_controller.dart';

class MatchesPlayerPage extends GetWidget<MatchesPlayerController>{
  final controller = Get.put(MatchesPlayerController());

  @override
  Widget build(BuildContext context) {
    return
     SingleChildScrollView(
       child:  
       Obx(() => Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           IntrinsicWidth(
             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: 14.sp,
                           fontWeight: FontWeight.bold,
                           color: ColorUtils.PRIMARY_COLOR),
                     ),
                     SizedBox(width: 20.w,),
                     const Icon(
                       Icons.sentiment_satisfied_alt_rounded,
                       color: Colors.white,
                       size: 18,
                     )
                   ],
                 )
                     : Row(
                   children: [
                     Text(
                       'All Stages',
                       style: TextStyle(
                           fontSize: 14.sp,
                           fontWeight: FontWeight.bold,
                           color: Colors.black),
                     ),
                     SizedBox(width: 20.w,),
                     const Icon(
                       Icons.sentiment_satisfied_alt_rounded,
                       color: Colors.white,
                       size: 18,
                     )
                   ],
                 ),
                 items: [
                   'All Stages',
                   'Final',
                   'Semi Finals',
                   'Europa League',
                   'Europa League',
                   'Europa League',
                   'Europa League',
                   'Europa League',
                   'Europa League',
                 ].map(
                       (value) {
                     return DropdownMenuItem<String>(
                         value: value,
                         child:
                         Column(
                           children: [
                             Container(
                               padding: const EdgeInsets.all(8),
                               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,),
                                     const SizedBox(width: 4,),
                                     Text(value, style:  TextStyle(color: Colors.black45, fontSize: 10.sp, fontWeight: FontWeight.w500,)),
                                   ]
                               ),
                             ),
                             const Divider(),
                           ],
                         )
                     );
                   },
                 ).toList(),
                 onChanged: (String? value) {
                 },
               ),
             ),
           ),
            SizedBox(height: 16.h),
           SizedBox(
             height: 30.h,
             child: ListView.builder(
                 itemCount: controller.list2.length,
                 shrinkWrap: true,
                 physics: const NeverScrollableScrollPhysics(),
                 scrollDirection: Axis.horizontal,
                 itemBuilder: (context, index){
                   return
                     InkWell(
                       onTap: (){
                         controller.indexChange.value = index;
                       },
                       child:
                       Obx(() =>  Container(
                         decoration: BoxDecoration(
                           border: Border.all(width: 1, color: Colors.white),
                           color: controller.indexChange.value == index ? ColorUtils.boldWhiteColor: ColorUtils.COLOR_TEXT_BLACK87,
                           borderRadius: BorderRadius.circular(24)
                           ,
                         ),
                         padding:   EdgeInsets.symmetric(vertical: 6.h, horizontal: 10.w),
                         margin:  EdgeInsets.symmetric(horizontal: 8.w),
                         child: Text('${controller.list2[index].name}', style: TextStyle(color:controller.indexChange.value == index?ColorUtils.COLOR_BLACK :  ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.w500),),
                       )),
                     );


                 }),
           ),
            SizedBox(height: 16.h,),
           controller.indexChange.value ==0 ?
           ListView.builder(
               itemCount: 2,
               shrinkWrap: true,
               physics: const NeverScrollableScrollPhysics(),
               itemBuilder: (context, index){
                 return
                   Column(
                     children: [
                       const SizedBox(height: 8,),
                       Row(
                         children: [
                           Row(
                             children: [
                               const SizedBox(
                                   width: 24,
                                   height: 24,
                                   child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/fr/9/9d/Logo_Al-Nassr.png')
                               ),
                               const SizedBox(width: 4,),
                               Column(
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
                                   Text('Primier League', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12.sp),),
                                   Text('Endland', 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: 10,
                           physics: const NeverScrollableScrollPhysics(),
                           shrinkWrap: true,
                           itemBuilder: (context, index){
                             return Container(
                               margin: const EdgeInsets.only(top: 4),
                               decoration: BoxDecoration(
                                   color: Colors.white10,
                                   borderRadius: BorderRadius.circular(6)
                               ),

                               padding:const EdgeInsets.all(8),
                               child: Row(
                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                 children: [
                                   Column(
                                     crossAxisAlignment:CrossAxisAlignment.start,
                                     children: [
                                       Row(
                                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                         children: [
                                           Text('25 May', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           SizedBox(width: 4.w,),
                                           const SizedBox(
                                               width: 24,
                                               height: 24,
                                               child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/fr/thumb/9/9f/Logo_Juventus.svg/2088px-Logo_Juventus.svg.png')
                                           ),
                                           SizedBox(width: 4.w,),
                                           SizedBox(
                                             width: 120.w,
                                             child:  Text('Dortmund', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           ),
                                           SizedBox(
                                             height: 12,
                                             child: ListView.builder(
                                                 itemCount:4,
                                                 shrinkWrap: true,
                                                 scrollDirection: Axis.horizontal,
                                                 itemBuilder: (context, index){
                                                   return Container(
                                                     margin: const EdgeInsets.symmetric(horizontal: 4),
                                                     child: Container(
                                                       height: 10,
                                                       width: 8,
                                                       decoration: BoxDecoration(
                                                           borderRadius: BorderRadius.circular(2),
                                                           color: Colors.red
                                                       ),
                                                     ),
                                                   );

                                                 }),
                                           ),
                                           Text('5', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.white),)
                                         ],
                                       ),
                                       const SizedBox(height: 8,),
                                       Row(
                                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                         children: [
                                           Text('25 May', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           SizedBox(width: 4.w,),
                                           const SizedBox(
                                               width: 24,
                                               height: 24,
                                               child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/fr/thumb/9/9f/Logo_Juventus.svg/2088px-Logo_Juventus.svg.png')
                                           ),
                                           SizedBox(width: 4.w,),
                                           SizedBox(
                                             width: 120.w,
                                             child:  Text('Dortmund', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           ),
                                           SizedBox(
                                             height: 12,
                                             child: ListView.builder(
                                                 itemCount:4,
                                                 shrinkWrap: true,
                                                 scrollDirection: Axis.horizontal,
                                                 itemBuilder: (context, index){
                                                   return Container(
                                                     margin: const EdgeInsets.symmetric(horizontal: 4),
                                                     child: Container(
                                                       height: 10,
                                                       width: 8,
                                                       decoration: BoxDecoration(
                                                           borderRadius: BorderRadius.circular(2),
                                                           color: Colors.red
                                                       ),
                                                     ),
                                                   );

                                                 }),
                                           ),
                                           Text('5', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.white),)
                                         ],
                                       ),

                                     ],
                                   ),
                                   Column(
                                     children: [
                                       Text('90\' ',style: TextStyle(fontSize: 10.sp, fontWeight: FontWeight.w300, color: Colors.white), ),
                                     ],
                                   )

                                 ],
                               ),
                             );

                           })
                     ],
                   );
               }) :
           ListView.builder(
               itemCount: 2,
               shrinkWrap: true,
               physics: const NeverScrollableScrollPhysics(),
               itemBuilder: (context, index){
                 return
                   Column(
                     children: [
                       const SizedBox(height: 8,),
                       Row(
                         children: [
                           Row(
                             children: [
                               const SizedBox(
                                   width: 24,
                                   height: 24,
                                   child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/fr/9/9d/Logo_Al-Nassr.png')
                               ),

                               const SizedBox(width: 4,),
                               Column(
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
                                   Text('Primier League', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12.sp),),
                                   Text('Endland', 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: 10,
                           physics: const NeverScrollableScrollPhysics(),
                           shrinkWrap: true,
                           itemBuilder: (context, index){
                             return Container(
                               margin: const EdgeInsets.only(top: 4),
                               decoration: BoxDecoration(
                                   color: Colors.white10,
                                   borderRadius: BorderRadius.circular(6)
                               ),

                               padding:const EdgeInsets.all(8),
                               child: Row(
                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                 children: [
                                   Column(
                                     crossAxisAlignment:CrossAxisAlignment.start,
                                     children: [
                                       Row(
                                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                         children: [
                                           Text('25 May', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           SizedBox(width: 4.w,),
                                           const SizedBox(
                                               width: 24,
                                               height: 24,
                                               child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/fr/9/9d/Logo_Al-Nassr.png')
                                           ),

                                           SizedBox(width: 4.w,),
                                           SizedBox(
                                             width: 120.w,
                                             child:  Text('Dortmund', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           ),
                                           SizedBox(
                                             height: 12,
                                             child: ListView.builder(
                                                 itemCount:4,
                                                 shrinkWrap: true,
                                                 scrollDirection: Axis.horizontal,
                                                 itemBuilder: (context, index){
                                                   return Container(
                                                     margin: const EdgeInsets.symmetric(horizontal: 4),
                                                     child: Container(
                                                       height: 10,
                                                       width: 8,
                                                       decoration: BoxDecoration(
                                                           borderRadius: BorderRadius.circular(2),
                                                           color: Colors.red
                                                       ),
                                                     ),
                                                   );

                                                 }),
                                           ),
                                           Text('5', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.white),)
                                         ],
                                       ),
                                        SizedBox(height: 8.h,),
                                       Row(
                                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                         children: [
                                           Text('25 May', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           SizedBox(width: 4.w,),
                                           const SizedBox(
                                               width: 24,
                                               height: 24,
                                               child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/fr/9/9d/Logo_Al-Nassr.png')
                                           ),

                                           SizedBox(width: 4.w,),
                                           SizedBox(
                                             width: 120.w,
                                             child:  Text('Dortmund', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.grey),),
                                           ),
                                           SizedBox(
                                             height: 12,
                                             child: ListView.builder(
                                                 itemCount:4,
                                                 shrinkWrap: true,
                                                 scrollDirection: Axis.horizontal,
                                                 itemBuilder: (context, index){
                                                   return Container(
                                                     margin: const EdgeInsets.symmetric(horizontal: 4),
                                                     child: Container(
                                                       height: 10,
                                                       width: 8,
                                                       decoration: BoxDecoration(
                                                           borderRadius: BorderRadius.circular(2),
                                                           color: Colors.red
                                                       ),
                                                     ),
                                                   );

                                                 }),
                                           ),
                                           Text('5', style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Colors.white),)
                                         ],
                                       ),

                                     ],
                                   ),
                                   Column(
                                     children: [
                                       Text('90\' ',style: TextStyle(fontSize: 10.sp, fontWeight: FontWeight.w300, color: Colors.white), ),
                                     ],
                                   )

                                 ],
                               ),
                             );

                           })
                     ],
                   );
               })

         ],
       )),
     );
  }
}