import 'package:betting/view/mobile/scores/football/detail_tournament/table_tournament/table_tournament_controller.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 '../../../../../../routes/app_pages.dart';


  class TableTournamentPage extends GetView<TableTournamentController> {
  @override
  final controller = Get.put(TableTournamentController());

  TableTournamentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      return SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 24.h,
              margin: EdgeInsets.symmetric(horizontal: 8.w,vertical: 8.h),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.zero,
                itemCount: controller.listTypeTable.length,
                itemBuilder: (context, index) {
                  return Obx(() => InkWell(
                    onTap: () {
                      controller.indexCLick.value = index;
                    },
                    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, fontSize: 14.sp)),
                    ),));
                },),
            ),
            // Container(
            //   margin: EdgeInsets.symmetric(horizontal: 8.w),
            //   decoration: BoxDecoration(
            //       border: Border.all(color:  const Color.fromRGBO(255, 255, 255, 0.1)),
            //       borderRadius: BorderRadius.circular(6.r)
            //   ),
            //   child: Column(
            //     children: [
            //       Container(
            //         padding: EdgeInsets.symmetric(vertical: 8.h),
            //         decoration: const BoxDecoration(
            //             border: Border(bottom: BorderSide(color: Color.fromRGBO(255, 255, 255, 0.1)))
            //         ),
            //         child:  Row(
            //           children: [
            //             Container(
            //               width: orientation == Orientation.portrait?40.w:24.w,
            //               alignment: Alignment.center,
            //               child:  Text("#",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //             ),
            //             SizedBox(
            //               width: orientation == Orientation.portrait?40.w:25.w,
            //               child:  Text("TEAM",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //             ),
            //             const Spacer(),
            //             Container(
            //               width: orientation == Orientation.portrait?40.w:24.w,
            //               alignment: Alignment.center,
            //               child:  Text("P",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //             ),
            //             orientation == Orientation.landscape?Container(
            //               alignment: Alignment.center,
            //               width: 30.w,
            //               child:  Text("W",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //             ):const SizedBox(),
            //             orientation == Orientation.landscape?Container(
            //               alignment: Alignment.center,
            //               width: 30.w,
            //               child:  Text("D",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //             ):const SizedBox(),
            //             orientation == Orientation.landscape?Container(
            //               alignment: Alignment.center,
            //               width: 30.w,
            //               child:  Text("L",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //             ):const SizedBox(),
            //             orientation == Orientation.landscape?Container(
            //               alignment: Alignment.center,
            //               width: 30.w,
            //               child:  Text("F",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //             ):const SizedBox(),
            //             orientation == Orientation.landscape?Container(
            //               alignment: Alignment.center,
            //               width: 30.w,
            //               child:  Text("A",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //             ):const SizedBox(),
            //             Container(
            //               width: orientation == Orientation.portrait?40.w:24.w,
            //               alignment: Alignment.center,
            //               child:  Text("GD",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //             ),
            //             Container(
            //               alignment: Alignment.center,
            //               width: orientation == Orientation.portrait?40.w:24.w,
            //               child:  Text("PTS",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //             ),
            //
            //           ],
            //         ),
            //       ),
            //       Obx(() => ListView.builder(
            //           shrinkWrap: true,
            //           padding: EdgeInsets.zero,
            //           physics: const NeverScrollableScrollPhysics(),
            //           itemCount: controller.teams.length,
            //           itemBuilder: (context, index) {
            //             return Stack(
            //               children: [
            //                 Container(
            //                   padding: EdgeInsets.only(top: 8.h, bottom: 5.h),
            //                   decoration: const BoxDecoration(
            //                       border: Border(bottom: BorderSide(color:  Color.fromRGBO(255, 255, 255, 0.1)))
            //                   ),
            //                   child: Stack(
            //                     children: [
            //                       Row(
            //                         mainAxisAlignment: MainAxisAlignment.start,
            //                         crossAxisAlignment: CrossAxisAlignment.center,
            //                         children: [
            //                           Container(
            //                             width: orientation == Orientation.portrait?40.w:24.w,
            //                             alignment: Alignment.center,
            //                             child: Text(controller.teams[index].rank,style:  TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //                           ),
            //                           InkWell(
            //                             onTap: () {
            //                               Get.toNamed(Routes.detailTeams);
            //                             },
            //                             child: const SizedBox(
            //                               height: 18,
            //                               width:18,
            //                               child: CacheNetWorkCustom(urlImage: 'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png'
            //                                   // '${controller.teams[index].team.logo}'
            //                                 ,),
            //                             ),
            //                           ),
            //                           SizedBox(width: orientation == Orientation.portrait?8.w:4.w,),
            //                           SizedBox(
            //                             width: 130.w,
            //                             child: InkWell(
            //                               onTap: () {
            //                                 Get.toNamed(Routes.detailTeams);
            //                               },
            //                               child: Text("${controller.teams[index].name}",style:  TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp)),
            //                             ),
            //                           ),
            //                           const Spacer(),
            //                           Container(
            //                             width: orientation == Orientation.portrait?40.w:24.w,
            //                             alignment: Alignment.center,
            //                             child:  Text(controller.teams[index].matches,style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //                           ),
            //                           orientation == Orientation.landscape?Container(
            //                             alignment: Alignment.center,
            //                             width: 30.w,
            //                             child:  Text(controller.teams[index].won,style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //                           ):const SizedBox(),
            //                           orientation == Orientation.landscape?Container(
            //                             alignment: Alignment.center,
            //                             width: 30.w,
            //                             child:  Text(controller.teams[index].drawn,style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //                           ):const SizedBox(),
            //                           orientation == Orientation.landscape?Container(
            //                             alignment: Alignment.center,
            //                             width: 30.w,
            //                             child:  Text(controller.teams[index].lost,style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //                           ):const SizedBox(),
            //                           orientation == Orientation.landscape?Container(
            //                             alignment: Alignment.center,
            //                             width: 30.w,
            //                             child:  Text("F",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //                           ):const SizedBox(),
            //                           orientation == Orientation.landscape?Container(
            //                             alignment: Alignment.center,
            //                             width: 30.w,
            //                             child:  Text("A",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold, fontSize: 12.sp),),
            //                           ):const SizedBox(),
            //                           Container(
            //                             width: orientation == Orientation.portrait?40.w:24.w,
            //                             alignment: Alignment.center,
            //                             child:  Text(controller.teams[index].goalDiff,style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //                           ),
            //                           Container(
            //                             alignment: Alignment.center,
            //                             width: orientation == Orientation.portrait?40.w:24.w,
            //                             child:  Text(controller.teams[index].points,style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            //                           ),
            //                         ],
            //                       ),
            //
            //                     ],
            //                   ),
            //                 ),
            //                 Positioned(
            //                     bottom: 0,
            //                     left: 0,
            //                     child: Container(
            //                       width: orientation == Orientation.portrait?40.w:24.w,
            //                       alignment: Alignment.center,
            //                       child: Container(
            //                         height: 4.h,
            //                         width: orientation == Orientation.portrait?24.w:16.w,
            //                         decoration: BoxDecoration(
            //                             color: controller.getColorIndexPosition(index),
            //                             borderRadius: BorderRadius.only(topLeft: Radius.circular(12.r),topRight: Radius.circular(12.r))
            //                         ),
            //                       ),
            //                     ))
            //               ],
            //             );
            //           },),
            //       )
            //     ],
            //   ),
            // ),
            Visibility(
                visible: true,
                child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 8.w,vertical: 16.h),
                  decoration: BoxDecoration(
                      color: const Color.fromRGBO(255, 255, 255, 0.1),
                      borderRadius: BorderRadius.circular(4.r)
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 4.h),
                  child:  Row(
                    children: [
                      const Icon(Icons.crop_rotate,color: Colors.white,size: 16,),
                      const Spacer(),
                      Center(
                        child: Text("Rotate to view expanded table",style: TextStyle(color: Colors.white, fontSize: 12.sp),),
                      ),
                      const Spacer(),
                    ],
                  ),
                )),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 8.w,vertical: 8.h),
              child: Row(
                children: [
                  const Icon(Icons.circle,color: Colors.blue,size: 16,),
                  SizedBox(width: 8.w,),
                  Text("Champions League",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 8.w,vertical: 8.h),
              child: Row(
                children: [
                  const Icon(Icons.circle,color: Colors.orangeAccent,size: 16,),
                  SizedBox(width: 8.w,),
                  Text("Europa League",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 8.w,vertical: 8.h),
              child: Row(
                children: [
                  const Icon(Icons.circle,color: Colors.greenAccent,size: 16,),
                  SizedBox(width: 8.w,),
                  Text("Europa Conference League qualification",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 8.w,vertical: 8.h),
              child: Row(
                children: [
                  const Icon(Icons.circle,color: Colors.pink,size: 16,),
                  SizedBox(width: 8.w,),
                  Text("Relegation",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 12.sp),),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              child: const Text("If the 1st and 2st team are tied on equal points at the end of the season, they will play a playoff match to decide the champion",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 16.w,vertical: 16.h),
              child:  Text("Cup winner qualifies for European competition",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold,fontSize: 12.sp),),
            )
          ],
        ),
      );
    },);
  }
}
