import 'package:betting/view/mobile/scores/football/detail_tournament/player_stats/player_stats_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../../../../commom/widget/cache_network_custom.dart';
import '../../../../../../routes/app_pages.dart';

class TournamentPlayerStatsPage
    extends GetView<TournamentPlayerStatsController> {
  @override
  final controller = Get.put(TournamentPlayerStatsController());

  TournamentPlayerStatsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            height: 24.h,
            margin: EdgeInsets.symmetric(horizontal: 8.w, vertical: 8.h),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: controller.listParameter.length,
              itemBuilder: (context, index) {
                return Obx(() => InkWell(
                      onTap: () {
                        controller.indexCLick.value = index;
                        controller.listParameter1.refresh();
                      },
                      child: Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 16.w, vertical: 4.h),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: controller.indexCLick.value == index
                                ? Colors.white
                                : Colors.transparent,
                            borderRadius: BorderRadius.circular(24.r),
                            border: Border.all(
                                color: controller.indexCLick.value == index
                                    ? Colors.transparent
                                    : Colors.white60)),
                        margin: EdgeInsets.only(right: 8.w),
                        child: Text(controller.listParameter[index],
                            style: TextStyle(
                                color: controller.indexCLick.value == index
                                    ? Colors.black
                                    : Colors.white60)),
                      ),
                    ));
              },
            ),
          ),
          Obx(
            () => ListView.builder(
              shrinkWrap: true,
              padding: EdgeInsets.zero,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: controller.listParameter1.length,
              itemBuilder: (context, index) {
                return controller.indexCLick.value - 1 == index ||
                        controller.indexCLick.value == 0
                    ? Wrap(
                        verticalDirection: VerticalDirection.down,
                        children: [
                          Container(
                            margin: EdgeInsets.all(8.h),
                            child: Row(
                              children: [
                                Text(
                                  controller.listParameter1[index],
                                  style: TextStyle(
                                    color: Colors.white54,
                                    fontSize: 12.sp,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.symmetric(horizontal: 8.w),
                            decoration: BoxDecoration(
                                border: Border.all(color: Colors.white54),
                                borderRadius: BorderRadius.circular(6.r)),
                            child: Column(
                              children: [
                                ListView.builder(
                                  itemCount: 4,
                                  shrinkWrap: true,
                                  padding: EdgeInsets.zero,
                                  physics: const NeverScrollableScrollPhysics(),
                                  itemBuilder: (context, index) {
                                    return InkWell(
                                      onTap: () {
                                        Get.toNamed(Routes.detailPlayer);
                                      },
                                      child: Container(
                                        margin:
                                            EdgeInsets.symmetric(vertical: 4.h),
                                        padding:
                                            EdgeInsets.symmetric(vertical: 4.h),
                                        alignment: Alignment.center,
                                        decoration: const BoxDecoration(
                                          border: Border(
                                            bottom: BorderSide(
                                              color: Colors.white54,
                                            ),
                                          ),
                                        ),
                                        child: Row(
                                          children: [
                                            SizedBox(
                                              width: 8.w,
                                            ),
                                            Text(
                                              '${index + 1}',
                                              style: const TextStyle(
                                                  color: Colors.white54),
                                            ),
                                            SizedBox(
                                              width: 8.w,
                                            ),
                                            SizedBox(
                                              height: 18.h,
                                              width: 18.h,
                                              child: CacheNetWorkCustom(
                                                urlImage:
                                                    '${controller.teams[3]["logo"]}',
                                              ),
                                            ),
                                            SizedBox(
                                              width: 8.w,
                                            ),
                                            Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  "Đặng Văn Bình",
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 14.sp),
                                                ),
                                                Text(
                                                  "Arsenal",
                                                  style: TextStyle(
                                                      color: Colors.white60,
                                                      fontSize: 12.sp),
                                                ),
                                              ],
                                            ),
                                            const Spacer(),
                                            const Text(
                                              "100",
                                              style: TextStyle(
                                                  color: Colors.white),
                                            ),
                                            SizedBox(
                                              width: 8.w,
                                            ),
                                          ],
                                        ),
                                      ),
                                    );
                                  },
                                ),
                                InkWell(
                                  onTap: () {},
                                  child: Container(
                                    alignment: Alignment.center,
                                    width: double.infinity,
                                    child: const Text("See All",
                                        style:
                                            TextStyle(color: Colors.white54)),
                                  ),
                                ),
                                SizedBox(
                                  height: 4.h,
                                ),
                              ],
                            ),
                          ),
                        ],
                      )
                    : Container();
              },
            ),
          ),
        ],
      ),
    );
  }
}
