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

import 'detail_player_controller.dart';

class DetailPlayerPage extends GetWidget<DeatailPlayerController>{
  final controller = Get.put(DeatailPlayerController());

  @override
  Widget build(BuildContext context) {
    return
      Stack(
      children: [
        Image.asset(
          "assets/images/background_app_betting.jpg",
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          fit: BoxFit.cover,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            toolbarHeight: 250,
            backgroundColor: Colors.transparent,
            automaticallyImplyLeading: false,
             flexibleSpace:
            SizedBox(
              width: double.infinity,
              child:   Stack(
                children: [
                SizedBox(
                  width: double.infinity,
                  child:   Image.asset('assets/images/cr7.jpg', fit: BoxFit.cover,),
                ),
                  Positioned(
                      top: 20.h,
                      left: 0,
                      child:
                      Container(
                        margin: const EdgeInsets.symmetric(horizontal: 16),
                        child:   Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                             SizedBox(height: 16.h,),
                            InkWell(
                              onTap: (){
                                Get.back();
                              },
                              child:  Icon(CupertinoIcons.back, color: Colors.white,size: 24.sp,),
                            ),

                            ],
                        ),
                      )),
                  Positioned(
                      bottom: 20.h,
                      left: 16.w,
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Cristiano', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 12.sp,color: Colors.white),),
                      const SizedBox(height: 4,),
                      Text('Ronaldo', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.sp,color: Colors.white),),
                      const SizedBox(height: 16,),
                      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: 24, height: 24,),
                              const SizedBox(width: 4,),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('#1 . Foward', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w300, fontSize: 10.sp),),
                                  Text('Real Marid', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14.sp),),
                                ],
                              )
                            ],
                          ),

                        ],
                      ),


                    ],
                  ))
                ],
              ),
            ),


          ),
          body:
     Container(
            margin: const EdgeInsets.symmetric(horizontal: 16),
            child:   Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: 40.h,
                  child: ListView.builder(
                      itemCount: controller.listTitle.length,
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context,index){
                        return GetBuilder<DeatailPlayerController>(builder: (controller){
                          return TextButton(
                              onPressed: () {
                                controller.indexClick.value = index;
                                controller.pageController.animateToPage(index,
                                    duration: const Duration(milliseconds: 500,),
                                    curve: Curves.ease);
                                controller.update();
                              },
                              child: Obx(() => Text(
                                controller.listTitle[index],
                                style: TextStyle(
                                    fontWeight: FontWeight.w500,
                                    fontSize: 14.sp,
                                    color: controller.indexClick.value == index
                                        ? ColorUtils.PRIMARY_COLOR
                                        : const Color.fromRGBO(177, 177, 177, 1)),
                              )));
                        });
                      }),
                ),
                const PreferredSize(preferredSize: Size(double.infinity, 1), child: Divider(color: Colors.white,)),
                Expanded(
                    child: PageView(
                      onPageChanged: (value) {
                        controller.onPageViewChange(value);
                      },
                      controller: controller.pageController,
                      physics: const NeverScrollableScrollPhysics(),
                      children: controller.listPage,
                    ))
              ],
            ),
          ),
        ),


      ],
    );
  }
}