import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/view/mobile/news/detail_news/detail_news_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class DetailNewsPage extends GetWidget<DetailNewsController>{
  final controller = Get.put(DetailNewsController());

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        centerTitle:true ,
        title:  Text('News',textAlign: TextAlign.center,style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 16.sp, fontWeight: FontWeight.w500),),
        automaticallyImplyLeading: false,
        backgroundColor: Colors.black,
        leading: InkWell(
          onTap: (){
            Get.back();
          },
          child: Icon(CupertinoIcons.back, size: 16.sp,),
        ),
        actions:  [
          const Icon(Icons.ios_share_outlined) ,
          SizedBox(width: 16.w),
        ],
      ),
      body:
      SingleChildScrollView(
        child:  Container(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 12.h,),
              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('PGMOL condemns abuse of refere Taylor at Budatpest Ảipost',style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 20.sp, fontWeight: FontWeight.bold),)
                ,),
              SizedBox(height: 16.h,),
              Row(
                children: [
                  Image.asset('assets/images/img_Splat.png', width: 32, height: 32,),
                  const SizedBox(width: 8,),
                  Text('Press Asscition', style: TextStyle(color:ColorUtils.COLOR_TEXT_GREY, fontSize: 10.sp, fontWeight: FontWeight.w400),),
                  const Spacer(),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text('02/06/2023', style: TextStyle(color:ColorUtils.COLOR_TEXT_GREY, fontSize: 14.sp, fontWeight: FontWeight.w400),),
                      Text('03:11', style: TextStyle(color: ColorUtils.COLOR_TEXT_GREY, fontSize: 10.sp, fontWeight: FontWeight.w400),),
                    ],
                  ),
                ],
              ),
              SizedBox(height: 8.h,),
              Column(
                children: [
                  Image.asset('assets/images/img_Splat.png',height: 100,width: double.infinity,),
                  const SizedBox(height: 4,),
                  Text('Press Asscition Press Asscition Press ', style: TextStyle(color: CupertinoColors.systemGrey5, fontSize: 10.sp, fontWeight: FontWeight.w400),),
                ],
              ),
              SizedBox(height: 16.h,),
              Text('Đội tuyển Việt Nam sẽ tập trung chuẩn bị tham dự 2 trận đấu giao hữu quốc tế, lần lượt gặp ĐT Hồng Kông (Trung Quốc) vào ngày 15/6 tại sân Lạch Tray- Hải Phòng và gặp ĐT Syria ngày 20/6 tại sân Thiên Trường - Nam Định'

                  'HLV Troussier đã triệu tập những gương mặt dày dạn kinh nghiệm và đang thể hiện phong độ tốt tại V.League, bên cạnh đó nhà cầm quân cũng trao cơ hội cho các nhân tố mới, trong đó đáng chú ý là sự góp mặt của tiền vệ Lê Phạm Thành Long đang chơi rất thăng hoa trong màu áo Đông Á Thanh Hóa, hay như Bùi Văn Đức của Hồng Lĩnh Hà Tĩnh – cầu thủ người Mường được biết đến với lối chơi đa năng và sở hữu nền tảng thể lực sung mãn'

                  'Bên cạnh đó, do ĐT Việt Nam tập trung dịp FIFA Days nên HLV Philippe Troussier cũng đề nghị triệu tập 3 cầu thủ đang chơi bóng ở nước ngoài trở về tham gia đội tuyển, đó là Nguyễn Quang Hải (CLB Pau, Pháp), Nguyễn Văn Toàn (CLB Seoul E-Land, Hàn Quốc) và Nguyễn Công Phượng (CLB Yokohama, Nhật Bản). Tuy vậy, ở đợt tập trung này đội tuyển cũng có một số sự vắng mặt đáng tiếc là tiền vệ Đỗ Hùng Dũng (mới trải qua phẫu thuật ruột thừa), Phan Văn Đức (chấn thương), Nguyễn Văn Quyết (nghỉ thi đấu do đang chịu án treo giò',
                style: TextStyle(color: ColorUtils.boldWhiteColor, fontSize: 16.sp, fontWeight: FontWeight.bold),),
              SizedBox(
                height: 16.h,
              ),
              const Divider(
                color: ColorUtils.boldWhiteColor,
                height: 1,
              ),
              const SizedBox(
                height: 4,
              ),
              Text('Tag', style: TextStyle(color: ColorUtils.boldWhiteColor, fontWeight: FontWeight.w400, fontSize: 14.sp),),
              const SizedBox(
                height: 4,
              ),
              const Divider(
                color: ColorUtils.boldWhiteColor,
                height: 1,
              ),
              SizedBox(height: 16.h,),
              ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: controller.list.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index){
                    return
                      Column(
                        children: [
                          const SizedBox(height: 8,),
                          Row(
                            children: [
                              Container(

                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(6)
                                ),
                                child: Image.asset('assets/images/img_Splat.png',height: 80,width:80.w,),
                              ),
                              Expanded(child:   Container(
                                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),)
                                    ),
                                    const SizedBox(height: 16,),
                                    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),)
                                        ],
                                      ),
                                    )

                                  ],
                                ),
                              ))
                            ],
                          )
                        ],
                      );

                  })





            ],
          ),
        ),
      ),
    );
  }
}