import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/commom/widget/cache_network_custom.dart';
import 'package:betting/view/mobile/watch/watch_controller.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

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

  WatchPage({super.key});

  @override
  Widget build(BuildContext context) {
    return
      SingleChildScrollView(
        child:
      Container(
        color: Colors.transparent,
        child:   Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 200.h,
              child:   Swiper(
                controller: controller.controllerS,
                autoplayDelay: 5000,
                autoplay: true,
                itemCount: 3,
                onIndexChanged: (value) {
                },
                itemBuilder: (BuildContext context, int index) {
                  return

                    InkWell(
                      onTap: (){
                      },
                      child:
                      Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6)
                        ),
                        margin: EdgeInsets.symmetric(horizontal: 8.w),
                        child: Stack(
                          children: [
                            const CacheNetWorkCustom(urlImage:'https://image.bnews.vn/MediaUpload/Org/2023/06/03/manchester-city-vs-manchester-united-20230603145011.jpg' ),
                            Positioned(
                              left: 10,
                              bottom: 0,
                              child:
                              SizedBox(
                                child: Text('${controller.list2[index].content}', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                              ),
                            ),
                            Positioned(
                                top: 0,
                                right: 10,
                                child: Container(
                                  margin: const EdgeInsets.symmetric(vertical: 8),
                                  padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
                                  decoration: BoxDecoration(
                                      color: ColorUtils.COLOR_TEXT_BLACK51,
                                      borderRadius: BorderRadius.circular(4)
                                  ),
                                  child: Row(
                                    children: [
                                      Icon(Icons.play_arrow, color: ColorUtils.boldWhiteColor,size: 12.sp,),
                                      Text('02:55', style: TextStyle(color: ColorUtils.boldWhiteColor, fontWeight: FontWeight.bold, fontSize: 10.sp),)
                                    ],
                                  ),
                                ))
                          ],
                        ),
                      )
                  );
                },
                pagination: const SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                        size: 5, color: Colors.grey, activeSize: 5, activeColor: Colors.white
                    )
                ),
              ),
            ),
            SizedBox(
              height: 16.h,
            ),
            ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: controller.list1.length,
                itemBuilder: (context, index){
                  return Container(
                    margin: const EdgeInsets.symmetric(horizontal: 16, vertical:16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('${controller.list1[index].title}', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 16.sp, fontWeight: FontWeight.bold),),
                        const SizedBox(height: 16,),
                        SizedBox(
                          height:index ==1 ? 180.h:  100.h,
                          child:
                          ListView.builder(
                              shrinkWrap: true,
                              scrollDirection: Axis.horizontal,
                              itemCount: controller.list2.length,
                              itemBuilder: (context, index2){
                                return
                                  index==1 ?
                                  InkWell(
                                      onTap: (){
                                      },
                                      child:
                                      Container(
                                        decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(6)
                                        ),
                                        margin: EdgeInsets.symmetric(horizontal: 8.w),
                                        child: Stack(
                                          children: [
                                            Container(
                                              width: 100.w,
                                              decoration: BoxDecoration(
                                                  borderRadius: BorderRadius.circular(8),
                                              ),
                                              child: const CacheNetWorkCustomBanner(urlImage:'https://image.bnews.vn/MediaUpload/Org/2023/06/03/manchester-city-vs-manchester-united-20230603145011.jpg' ),
                                            ),
                                            Positioned(
                                              left: 10,
                                              bottom: 0,
                                              child:
                                              SizedBox(
                                                width: 100.w,
                                                child: Text('${controller.list2[index].content}', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                                              ),
                                            ),
                                            Positioned(
                                                top: 0,
                                                right: 8,
                                                child: Container(
                                                  margin: const EdgeInsets.symmetric(vertical: 8),

                                                  padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
                                                  decoration: BoxDecoration(
                                                      color: ColorUtils.COLOR_TEXT_BLACK51,
                                                      borderRadius: BorderRadius.circular(4)
                                                  ),
                                                  child: Row(
                                                    children: [
                                                      Icon(Icons.play_arrow, color: ColorUtils.boldWhiteColor,size: 12.sp,),
                                                      Text('02:55', style: TextStyle(color: ColorUtils.boldWhiteColor, fontWeight: FontWeight.bold, fontSize: 10.sp),)
                                                    ],
                                                  ),
                                                ))
                                          ],
                                        ),
                                      )
                                  )   :
                                  InkWell(
                                      onTap: (){
                                      },
                                      child:
                                      Container(
                                        decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(6)
                                        ),
                                        margin: EdgeInsets.symmetric(horizontal: 8.w),
                                        child: Stack(
                                          children: [
                                            Container(
                                              width: 180.w,
                                              decoration: BoxDecoration(
                                                  borderRadius: BorderRadius.circular(8),
                                              ),
                                              child: const CacheNetWorkCustomBanner(urlImage:'https://image.bnews.vn/MediaUpload/Org/2023/06/03/manchester-city-vs-manchester-united-20230603145011.jpg' ),
                                            ),
                                            Positioned(
                                              left: 10,
                                              bottom: 0,
                                              child:
                                              SizedBox(
                                                width: 180.w,
                                                child: Text('${controller.list2[index].content}', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                                              ),
                                            ),
                                            Positioned(
                                                top: 0,
                                                right: 8,
                                                child: Container(
                                                  margin: const EdgeInsets.symmetric(vertical: 8),
                                                  padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
                                                  decoration: BoxDecoration(
                                                      color: ColorUtils.COLOR_TEXT_BLACK51,
                                                      borderRadius: BorderRadius.circular(4)
                                                  ),
                                                  child: Row(
                                                    children: [
                                                      Icon(Icons.play_arrow, color: ColorUtils.boldWhiteColor,size: 12.sp,),
                                                      Text('02:55', style: TextStyle(color: ColorUtils.boldWhiteColor, fontWeight: FontWeight.bold, fontSize: 10.sp),)
                                                    ],
                                                  ),
                                                ))
                                          ],
                                        ),
                                      )
                                  );
                              }),
                        )
                      ],
                    ),
                  );
                })
          ],
        ),
      ),
    );
  }
}