import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/commom/widget/cache_network_custom.dart';
import 'package:betting/routes/app_pages.dart';
import 'package:betting/view/mobile/home_page/home_controller.dart';
import 'package:betting/view/mobile/news/detail_news/detail_news_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'news_controller.dart';

class NewsPage extends GetWidget<NewsController>{
  final controller = Get.put(NewsController());

  @override
  Widget build(BuildContext context) {
    return
      RefreshIndicator(
          color: ColorUtils.PRIMARY_COLOR,
          child:
        SafeArea(
          child:
          Scaffold(
            backgroundColor: Colors.transparent,
            body:
            SingleChildScrollView(
              child:
              Container(
                margin: const EdgeInsets.symmetric(vertical: 16),
                child:Column(
                  children: [
                    SizedBox(
                      height: 30.h,
                      child: ListView.builder(
                          itemCount: controller.list2.length,
                          shrinkWrap: true,
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index){
                            return
                              InkWell(
                                onTap: (){
                                  controller.indexChange.value = index;
                                },
                                child:
                                Obx(() =>  Container(
                                  decoration: BoxDecoration(
                                      color: controller.indexChange.value == index ? ColorUtils.boldWhiteColor: ColorUtils.COLOR_TEXT_BLACK87,
                                      borderRadius: BorderRadius.circular(24)
                                  ),
                                  padding:  const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                                  margin: const EdgeInsets.symmetric(horizontal: 8),
                                  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,),
                    SizedBox(
                      height: 150.h,
                      child: ListView.builder(
                          itemCount: 10,
                          shrinkWrap: true,
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index){
                            return
                              InkWell(
                                  onTap: (){
                                    Get.to(DetailNewsPage());
                                  },
                                  child:
                                  Container(
                                    margin: EdgeInsets.symmetric(horizontal: 8.w),
                                    child: Stack(
                                      children: [
                                       SizedBox(
                                         width: 200.w,
                                         child:  const CacheNetWorkCustom(urlImage: 'https://image.bnews.vn/MediaUpload/Org/2023/06/03/manchester-city-vs-manchester-united-20230603145011.jpg'),
                                       ),
                                        Positioned(
                                            left: 10,
                                            top:0,
                                            child:
                                            Container(
                                              margin: const EdgeInsets.only(top: 8),
                                              padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
                                              decoration: BoxDecoration(
                                                  color: ColorUtils.COLOR_TEXT_BLACK87,
                                                  borderRadius: BorderRadius.circular(4)
                                              ),
                                              child: Text('Match reports', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 12.sp, fontWeight: FontWeight.w500),),
                                            ),
                                            ),

                                        Positioned(
                                            left: 10,
                                            bottom: 0,
                                            child: Column(
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              children: [
                                                SizedBox(
                                                  width: 200.w,
                                                  child: Text('Five talking ponts from sevilla 1-1 Roma (4 -1 on pens) sdfsdfsdfsdfsdfsdfsdfsdfsdf', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                                                ),
                                                const SizedBox(height:8,),
                                                Text('Update 8 hours ago', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 10.sp, fontWeight: FontWeight.w400),),
                                              ],
                                            ))

                                      ],
                                    ),
                                  )
                              );


                          }),
                    ),
                    SizedBox(height: 16.h,),
                    Image.asset('assets/images/test.jpg', width: 200.w, height: 100,),
                    SizedBox(height: 16.h,),
                    ListView.builder(
                        itemCount: controller.list.length,
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),

                        itemBuilder: (context, index){
                          return
                            Container(
                              margin: const EdgeInsets.symmetric(horizontal: 16),
                              child:  Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(height: 16.h,),
                                  Row(
                                    children: [
                                      Text('${controller.list[index].title}', style: TextStyle(color: ColorUtils.boldWhiteColor, fontWeight: FontWeight.w500, fontSize: 16.sp),),
                                      Expanded(child: Container()),
                                      controller.list[index].title != 'Top Stories' ?   Icon(Icons.navigate_next_outlined, color: Colors.white,size: 16.sp): Container()
                                    ],
                                  ),
                                  ListView.builder(
                                      itemCount: controller.list.length,
                                      shrinkWrap: true,
                                      physics: const NeverScrollableScrollPhysics(),
                                      itemBuilder: (context, index){
                                        return Container(
                                          margin: const EdgeInsets.symmetric(vertical: 8),
                                          height: 120.w,
                                          child: 
                                          InkWell(
                                            onTap: (){
                                              Get.toNamed(Routes.detailNews);
                                            },
                                            child:
                                            Row(
                                              children: [

                                                Container(
                                                  margin: const EdgeInsets.only(right: 8, top: 16),
                                                   width: 120.w,
                                                  decoration: BoxDecoration(
                                                      borderRadius: BorderRadius.circular(6),
                                                  ),
                                                  child:  const CacheNetWorkCustomBanner(urlImage: 'https://image.bnews.vn/MediaUpload/Org/2023/06/03/manchester-city-vs-manchester-united-20230603145011.jpg'),
                                                ),
                                                 Expanded(child:  Container(
                                                   padding: const EdgeInsets.all(8),
                                                 margin: const EdgeInsets.only(left: 4),
                                                 child:  Column(
                                                   crossAxisAlignment: CrossAxisAlignment.start,
                                                   children: [
                                                     controller.list[index].title != 'Top Stories'?  Container():    Container(
                                                       margin: const EdgeInsets.symmetric(vertical: 4),
                                                       padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
                                                       decoration: BoxDecoration(
                                                           color: ColorUtils.COLOR_RED,
                                                           borderRadius: BorderRadius.circular(4)
                                                       ),
                                                       child: Text('EXCLUSIVE', style: TextStyle(color: ColorUtils.COLOR_BLACK, fontWeight: FontWeight.w500, fontSize: 12.sp),),
                                                     ),
                                                     SizedBox(
                                                         child: Text('${controller.list[index].content}', style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 14.sp, fontWeight: FontWeight.w500),)
                                                     ),
                                                   Expanded(child: Container()),
                                                     SizedBox(
                                                       child:   Row(
                                                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                         children: [
                                                           Container(
                                                             padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
                                                             decoration: BoxDecoration(
                                                                 color: ColorUtils.COLOR_TEXT_BLACK51,
                                                                 borderRadius:      controller.list[index].title != 'Top Stories' ? BorderRadius.circular(12): BorderRadius.circular(4)
                                                             ),
                                                             child: Text('${controller.list[index].category}', style: TextStyle(color: ColorUtils.boldWhiteColor, fontWeight: FontWeight.w500, fontSize: 12.sp),),
                                                           ),
                                                           const Spacer(),
                                                           Text('${controller.list[index].time}', style: TextStyle(color: ColorUtils.colorGray, fontSize: 12.sp, fontWeight: FontWeight.w400),)
                                                         ],
                                                       ),
                                                     )

                                                   ],
                                                 ),
                                               ))

                                              ],
                                            ),),
                                        );

                                      })
                                ],
                              ),
                            );
                        })


                  ],
                ) ,
              ),
            ),
          ),
        ), onRefresh: () async {
        Get.find<HomeController>().onRefreshPressed();


      });
  }

}