import 'package:betting/commom/utils/textstyle.dart';
import 'package:betting/commom/widget/loading_custom.dart';
import 'package:betting/routes/app_pages.dart';
import 'package:betting/view/mobile/favourites_view/teams/team_info_view/overview_view/widgets/item_top_score.dart';
import 'package:betting/view/mobile/favourites_view/teams/team_info_view/team_info_controller.dart';
import 'package:betting/view/mobile/home_page/home_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';

import 'overview_controller.dart';

class OverviewView extends StatelessWidget {
  OverviewView({Key? key}) : super(key: key);
  final teamInfoController = Get.find<TeamInfoController>();
  final controller = Get.put(OverviewController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<OverviewController>(builder: (controller) {
      return controller.isReady.value ?
        RefreshIndicator(
          onRefresh: () async{
          Get.find<HomeController>().onRefreshPressed();

          },
          child: SingleChildScrollView(
            child: Obx(() => Column(
              children: [
                /// todo: Next match
              const SizedBox(height: 10,),
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  'NEXT MATCH',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white70),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(width: 0.8, color: Colors.white60),
                ),
                margin: const EdgeInsets.symmetric(horizontal: 10),
                padding: const EdgeInsets.all(10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    controller.infoTeam.value.match != null  || controller.infoTeam.value.h2h!= null  ?
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                        Image.network(
                          'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                          width: 35,
                          height: 35,
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Text(
                          '${controller.infoTeam.value.match?.home!.name!}',
                          style: TextStyleUtils.sizeText11Weight500()!
                              .copyWith(color: Colors.white),
                        ),
                        const SizedBox(
                          height: 8,
                        ),
                        SizedBox(
                          height: 7,
                          child:  ListView.builder(
                            itemCount: controller.h2hFormTeam1.length,
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index) {
                              return Container(
                                margin: const EdgeInsets.symmetric(horizontal: 2),
                                width: 7,
                                height: 7,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: controller.h2hFormTeam1[index] == 'W' ? Colors.green :
                                  controller.h2hFormTeam1[index] == 'D' ?  Colors.grey : Colors.red ,
                                ),
                              );
                              },
                          ),
                        ),
                        ],
                      ),
                ) : Container(),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          controller.outputTimeFormat.format(DateFormat('HH:mm:ss').parse('${controller.infoTeam.value.match?.time!}')),
                          style: TextStyleUtils.sizeText18Weight600()!
                              .copyWith(color: Colors.white),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Text(
                          controller.outputDateToDateFormat.format(DateFormat('yyyy-MM-dd').parse('${controller.infoTeam.value.match?.date!}')),
                          style: TextStyleUtils.sizeText10Weight500()!
                              .copyWith(color: Colors.white60),
                        ),
                      ],
                    ),
                controller.infoTeam.value.match != null  || controller.infoTeam.value.h2h!= null ?
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Image.network(
                        'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                        width: 35,
                        height: 35,
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                      Text(
                        '${controller.infoTeam.value.match?.away!.name!}',
                        style: TextStyleUtils.sizeText11Weight500()!
                            .copyWith(color: Colors.white),
                        ),
                        const SizedBox(
                          height: 8,
                        ),
                        SizedBox(
                          height: 7,
                          child: ListView.builder(
                            itemCount: controller.h2hFormTeam2.length,
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            itemBuilder: (context, index) {
                              return Container(
                                margin: const EdgeInsets.symmetric(horizontal: 2),
                                width: 7,
                                height: 7,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: controller.h2hFormTeam2[index] == 'W' ? Colors.green :
                                  controller.h2hFormTeam2[index] == 'D' ?  Colors.grey : Colors.red ,
                                ),
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                ) : Container(),
                  ],
                ),
              ),
              const SizedBox(
                height: 10,
              ),

              /// todo: Form
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  'FORM',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white70),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              Obx(() => Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(width: 0.8, color: Colors.white60),
                  ),
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  padding: const EdgeInsets.all(10),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            'Last 5',
                            style: TextStyleUtils.sizeText13Weight700()!
                                .copyWith(color: Colors.white70),
                          ),
                          controller.infoTeam.value.match != null || controller.infoTeam.value.h2h!= null  ?
                          Container(
                            alignment: Alignment.center,
                            height: 20,
                            child: ListView.builder(
                              itemCount: controller.h2hFormTeam1.length,
                              scrollDirection: Axis.horizontal,
                              shrinkWrap: true,
                              itemBuilder: (context, index) {
                                return Container(
                                  margin: const EdgeInsets.only(left: 2),
                                  alignment: Alignment.center,
                                  width: 20,
                                  height: 20,
                                  decoration: BoxDecoration(
                                    color: controller.h2hFormTeam1[index] == 'W' ? Colors.green :
                                    controller.h2hFormTeam1[index] == 'D' ? Colors.grey : Colors.red,
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  child: Text(controller.h2hFormTeam1[index],
                                    style: TextStyle(
                                      fontSize: 10.sp,
                                      color: Colors.white,
                                    ),
                                  ),
                                );
                              },),
                          ) : Container(),
                        ],
                      ),
                      SizedBox(
                        height: 10.h,
                      ),
                      controller.infoTeam.value.match != null || controller.infoTeam.value.h2h!= null ?
                      SizedBox(
                        height: 28.sp,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: controller.last5Team1.length,
                          itemBuilder: (context, index) {
                            return Container(
                                margin: const EdgeInsets.only(right: 10),
                                padding: EdgeInsets.all(8.sp),
                                decoration: BoxDecoration(
                                  borderRadius: const BorderRadius.all(Radius.circular(20,),),
                                  border: Border.all(width: 1, color: Colors.white70),
                                ),
                                child: controller.last5Team1[index].ftScore != 'VIEW ALL' ? Row(
                                  children: [
                                    Image.network(
                                      'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                      width: 28,
                                      height: 28,
                                    ),
                                    Text(
                                      controller.last5Team1[index].ftScore!,
                                      style: TextStyleUtils.sizeText11Weight600()!
                                          .copyWith(color: Colors.white70),
                                    ),
                                    Image.network(
                                      'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                      width: 28,
                                      height: 28,
                                    ),
                                  ]
                                ): GestureDetector(
                                  onTap: () {
                                    teamInfoController.tabController.animateTo(1,);
                                  },
                                  child: Text(
                                    'View All',
                                    style: TextStyleUtils.sizeText11Weight400()!
                                        .copyWith(color: Colors.white70),
                                  ),
                                )
                            );
                          },
                        ),
                      ) : Container(),
                    ],
                  ),
                ),
              ),

              /// todo: news
              const SizedBox(
                height: 10,
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  'NEWS',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white70),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 10),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white30, width: 0.5),
                  borderRadius: const BorderRadius.only(
                      topRight: Radius.circular(8), topLeft: Radius.circular(8)),
                ),
                child: ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: 2,
                  itemBuilder: (context, index) {
                    return Container(
                      padding: const EdgeInsets.all(8),
                      width: Get.width,
                      height: 100,
                      margin: const EdgeInsets.only(top: 10),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          ClipRRect(
                            borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                            child: Image.network(
                              'https://img.chelseafc.com/image/upload/f_auto,ar_16:9,w_500,c_fill,g_auto,q_90/editorial/women\'s-team/WSL_Goal_of_the_Season_June_2023.jpg',
                              width: 100,
                              height: 100,
                              fit: BoxFit.cover,
                            ),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                    'On this day 2014: Lampard announces his Chelsea departureOn this day 2014: Lampard announces his Chelsea departure',
                                    textAlign: TextAlign.left,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyleUtils.sizeText14Weight500()?.copyWith(height: 1.3, color: Colors.white),
                                    maxLines: 3),
                                const SizedBox(
                                  height: 2,
                                ),
                                Text('1 days ago',
                                    style: TextStyleUtils.sizeText10Weight400()
                                        ?.copyWith(color: Colors.white60))
                              ],
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
              GestureDetector(
                onTap: () {
                  // teamInfoController.tabController.animateTo(3,);
                },
                child: Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(8),
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white30, width: 0.5),
                    borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(8),
                      bottomRight: Radius.circular(8),
                    ),
                  ),
                  child: Text(
                    'See All',
                    style: TextStyleUtils.sizeText13Weight400()!
                        .copyWith(color: Colors.white),
                  ),
                ),
              ),

              /// todo: Top scorers
              const SizedBox(
                height: 10,
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  'TOP SCORERS',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white70),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 10),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white30, width: 0.5),
                  borderRadius: const BorderRadius.only(
                      topRight: Radius.circular(8), topLeft: Radius.circular(8)),
                ),
                child: ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: controller.topScores.length > 3 ? 3 : controller.topScores.length,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () {
                        Get.toNamed(Routes.detailPlayer);
                      },
                      child: ItemTopScore(
                          index: index,
                          logo: controller.topScores[index].team.logo,
                          playerName: controller.topScores[index].name,
                          clubName: controller.topScores[index].team.name,
                          goal: controller.topScores[index].goals),
                    );
                  },
                ),
              ),
              GestureDetector(
                onTap: () {
                  // teamInfoController.tabController.animateTo(6);
                },
                child: Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(8),
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white30, width: 0.5),
                    borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(8),
                      bottomRight: Radius.circular(8),
                    ),
                  ),
                  child: Text(
                    'See All',
                    style: TextStyleUtils.sizeText13Weight400()!
                        .copyWith(color: Colors.white),
                  ),
                ),
              ),

              /// todo: match highlight
              const SizedBox(
                height: 10,
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  'MATCH HIGHLIGHTS',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white70),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              SizedBox(
                width: double.infinity,
                height: 120,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: 5,
                  itemBuilder: (context, index) {
                    return Container(
                      margin: const EdgeInsets.only(left: 10),
                      width: 220,
                      child: Stack(
                        children: [
                          ClipRRect(
                            borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                            child: Image.network(
                                'https://img.chelseafc.com/image/upload/f_auto,ar_16:9,w_500,c_fill,g_auto,q_90/video/2023/05/26/1-1_CHE_NEWC.png'),
                          ),
                          Container(
                            width: double.infinity,
                            padding: const EdgeInsets.all(10),
                            alignment: Alignment.bottomCenter,
                            child: Text('Lampard end-of-season-exclusive',
                                style: TextStyleUtils.sizeText13Weight500()!.copyWith(color: Colors.white),
                                maxLines: 3,
                                softWrap: true,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.start),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),

              /// todo: table
              // const SizedBox(
              //   height: 10,
              // ),
              // Container(
              //   alignment: Alignment.topLeft,
              //   padding: const EdgeInsets.symmetric(horizontal: 15),
              //   child: Text(
              //     'TABLE',
              //     style: TextStyleUtils.sizeText12Weight500()!
              //         .copyWith(color: Colors.white70),
              //   ),
              // ),
              // const SizedBox(
              //   height: 8,
              // ),
              // Column(
              //   children: [
              //     Container(
              //       padding: EdgeInsets.symmetric(vertical: 8.h,),
              //       margin: const EdgeInsets.symmetric(horizontal: 10),
              //       decoration: BoxDecoration(
              //           border: Border.all(width: 1, color: const Color.fromRGBO(255, 255, 255, 0.1)),
              //         borderRadius: const BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8))
              //       ),
              //       child:  Row(
              //         children: [
              //           Container(
              //             width: 40.w,
              //             alignment: Alignment.center,
              //             child: const Text('#',style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //           ),
              //           SizedBox(
              //             width: 40.w,
              //             child: const Text("TEAM",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //           ),
              //           const Spacer(),
              //           Container(
              //             width: 40.w,
              //             alignment: Alignment.center,
              //             child: const Text("P",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //           ),
              //           Container(
              //             width: 40.w,
              //             alignment: Alignment.center,
              //             child: const Text("GD",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //           ),
              //           Container(
              //             alignment: Alignment.center,
              //             width: 40.w,
              //             child: const Text("PTS",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //           ),
              //         ],
              //       ),
              //     ),
              //     ListView.builder(
              //       shrinkWrap: true,
              //       padding: EdgeInsets.zero,
              //       physics: const NeverScrollableScrollPhysics(),
              //       itemCount: 3,
              //       itemBuilder: (context, index) {
              //         return GestureDetector(
              //           onTap: () {
              //             Navigator.push(context, MaterialPageRoute(builder: (context) => const TeamsInfoView(),));
              //           },
              //           child: Container(
              //             padding: EdgeInsets.symmetric(vertical: 8.h,),
              //             margin: const EdgeInsets.symmetric(horizontal: 10),
              //             decoration: BoxDecoration(
              //               border: Border.all(width: 1, color: const Color.fromRGBO(255, 255, 255, 0.1)),
              //             ),
              //             child: Row(
              //               crossAxisAlignment: CrossAxisAlignment.center,
              //               children: [
              //                 Container(
              //                   width: 40.w,
              //                   alignment: Alignment.center,
              //                   child: Text("${index +1}",style: const TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //                 ),
              //                 // SizedBox(
              //                 //   height: 18.h,
              //                 //   width:18.h,
              //                 //   child: CacheNetWorkCustom(urlImage: '${Get.find<TableTournamentController>().teams[index]["logo"]}',),
              //                 // ),
              //                 SizedBox(width: 8.w,),
              //                 Text("${Get.find<TableTournamentController>().teams[index]["name"]}",style: const TextStyle(color: Colors.white60,fontWeight: FontWeight.bold)),
              //                 const Spacer(),
              //                 Container(
              //                   width: 40.w,
              //                   alignment: Alignment.center,
              //                   child: const Text("38",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //                 ),
              //                 Container(
              //                   width: 40.w,
              //                   alignment: Alignment.center,
              //                   child: const Text("99",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //                 ),
              //                 Container(
              //                   alignment: Alignment.center,
              //                   width: 40.w,
              //                   child: const Text("90",style: TextStyle(color: Colors.white60,fontWeight: FontWeight.bold),),
              //                 ),
              //               ],
              //             ),
              //           ),
              //         );
              //       },)
              //   ],
              // ),
              // GestureDetector(
              //   onTap: () {
              //     teamInfoController.tabController.animateTo(2);
              //   },
              //   child: Container(
              //     alignment: Alignment.center,
              //     padding: const EdgeInsets.all(8),
              //     margin: const EdgeInsets.symmetric(horizontal: 10),
              //     width: double.infinity,
              //     decoration: BoxDecoration(
              //       border: Border.all(color: Colors.white30, width: 0.5),
              //       borderRadius: const BorderRadius.only(
              //         bottomLeft: Radius.circular(8),
              //         bottomRight: Radius.circular(8),
              //       ),
              //     ),
              //     child: Text(
              //       'See All',
              //       style: TextStyleUtils.sizeText13Weight400()!
              //           .copyWith(color: Colors.white),
              //     ),
              //   ),
              // ),

              /// TODO: VIDEOS
              const SizedBox(
                height: 10,
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  'VIDEOS',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white70),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              SizedBox(
                width: double.infinity,
                height: 120,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: 5,
                  itemBuilder: (context, index) {
                    return Container(
                      margin: const EdgeInsets.only(left: 10),
                      width: 220,
                      child: Stack(
                        children: [
                          ClipRRect(
                            borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                            child: Image.network(
                                'https://img.chelseafc.com/image/upload/f_auto,ar_16:9,w_500,c_fill,g_auto,q_90/video/2023/05/26/1-1_CHE_NEWC.png'),
                          ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 10, right: 20),
                                alignment: Alignment.topRight,
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Container(
                                      padding: const EdgeInsets.only(right: 8),
                                      decoration: BoxDecoration(
                                        color: Colors.white12,
                                        borderRadius: BorderRadius.circular(8),
                                      ),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          const Icon(
                                            Icons.play_arrow_rounded,
                                            color: Colors.white70,
                                          ),
                                          Text(
                                            '1:55',
                                            style: TextStyleUtils
                                                .sizeText12Weight500()!
                                                .copyWith(color: Colors.white70),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Container(
                                width: double.infinity,
                                padding: const EdgeInsets.all(10),
                                alignment: Alignment.bottomCenter,
                                child: Text('Lampard end-of-season-exclusive',
                                    style: TextStyleUtils.sizeText13Weight500()!
                                        .copyWith(color: Colors.white),
                                    maxLines: 3,
                                    softWrap: true,
                                    overflow: TextOverflow.ellipsis,
                                    textAlign: TextAlign.start),
                              ),
                            ],
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
              const SizedBox(
                height: 100,
              ),
            ],
          )),
        ),
      )
            : LoadingCustom();
    },);
  }
}
