import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/commom/utils/textstyle.dart';
import 'package:betting/routes/app_pages.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/line_ups_match/item_line_up/item_line_up.dart';
import 'package:betting/view/mobile/find/detail_matches_in_regions/line_ups_match/line_up_match_controller.dart';
import 'package:betting/view/mobile/home_page/home_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_device_type/flutter_device_type.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class LineUpMatchPage extends StatelessWidget {
  LineUpMatchPage({
    Key? key,
  }) : super(key: key);
  final lineUpMatchController = Get.put(LineUpsMatchController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LineUpsMatchController>(
      builder: (controller) {
        double widthScreen = !Device.get().isTablet
            ? 3.w
            : controller.isLandScape.value
                ? 4.w
                : 6.w;

        return RefreshIndicator(
          onRefresh: () async {
            Get.find<HomeController>().onRefreshPressed();

          },
          color: ColorUtils.PRIMARY_COLOR,
          child: SingleChildScrollView(
            physics: const ClampingScrollPhysics(),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: Get.width,
                  height: (!Device.get().isTablet) ? 720.h : 750.h,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: const AssetImage(
                          "assets/images/pitch.png",
                        ),
                        fit: !Device.get().isTablet
                            ? BoxFit.cover
                            : BoxFit.scaleDown),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: !Device.get().isTablet
                            ? Get.width
                            : controller.isLandScape.value
                                ? Get.width * 0.4081632
                                : Get.width * 0.838,
                        height: 25.h,
                        padding: EdgeInsets.symmetric(horizontal: 8.w),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              '${lineUpMatchController.teams[0]['teamName']} \t ${lineUpMatchController.teams[0]['tactical']}',
                              style: TextStyleUtils.sizeText12Weight500()!
                                  .copyWith(color: Colors.white),
                            ),
                            GestureDetector(
                              onTap: () {},
                              child: Row(
                                children: [
                                  const Icon(
                                    Icons.file_upload_outlined,
                                    color: Colors.white,
                                  ),
                                  Text(
                                    'Share',
                                    style: TextStyleUtils.sizeText12Weight500()!
                                        .copyWith(color: Colors.white),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                      Expanded(
                        child: Container(
                          alignment: Alignment.topCenter,
                          height: !Device.get().isTablet ? 335.h : 350.h,
                          child: ListView.builder(
                            reverse: false,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: lineUpMatchController.resData[0].length,
                            itemBuilder: (context, index) {
                              return Container(
                                alignment: Alignment.center,
                                height: Device.get().isPhone
                                    ? 335.h /
                                        lineUpMatchController.resData[0].length
                                    : 350.h /
                                        lineUpMatchController.resData[0].length,
                                width: Get.width,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    ListView.builder(
                                      shrinkWrap: true,
                                      scrollDirection: Axis.horizontal,
                                      physics:
                                          const NeverScrollableScrollPhysics(),
                                      itemCount: lineUpMatchController
                                          .resData[0][index].length,
                                      itemBuilder: (context, indexPlayer) {
                                        double widthItem;

                                        if (Device.get().isPhone) {
                                          if (lineUpMatchController
                                                  .resData[0][index].length >
                                              4) {
                                            widthItem = 62.w;
                                          } else {
                                            widthItem = 82.w;
                                          }
                                        } else {
                                          if ((controller.isLandScape.value)) {
                                            if (lineUpMatchController
                                                    .resData[0][index].length <
                                                5) {
                                              widthItem = 50.w;
                                            } else {
                                              widthItem = 40.w;
                                            }
                                          } else {
                                            if (lineUpMatchController
                                                    .resData[0][index].length <
                                                5) {
                                              widthItem = 95.w;
                                            } else {
                                              widthItem = 80.w;
                                            }
                                          }
                                        }
                                        return Container(
                                          width: widthItem,
                                          margin: EdgeInsets.symmetric(
                                              horizontal: widthScreen /
                                                  lineUpMatchController
                                                      .resData[0][index]
                                                          [indexPlayer]
                                                      .length),
                                          child: GestureDetector(
                                            onTap: () {
                                              Get.toNamed(Routes.detailPlayer);
                                            },
                                            child: ItemLineUp(
                                                shirtNumber: lineUpMatchController
                                                        .resData[0][index]
                                                    [indexPlayer]['shirtNumber'],
                                                namePlayers: lineUpMatchController
                                                        .resData[0][index]
                                                    [indexPlayer]['playersName']),
                                          ),
                                        );
                                      },
                                    ),
                                  ],
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          height: Device.get().isPhone
                              ? 335.h / lineUpMatchController.resData[0].length
                              : 350.h / lineUpMatchController.resData[0].length,
                          alignment: Alignment.bottomCenter,
                          child: ListView.builder(
                            reverse: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: lineUpMatchController.resData[1].length,
                            itemBuilder: (context, index) {
                              return Container(
                                alignment: Alignment.bottomCenter,
                                height: Device.get().isPhone
                                    ? 335.h /
                                        lineUpMatchController.resData[0].length
                                    : 350.h /
                                        lineUpMatchController.resData[0].length,
                                width: Get.width,
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceEvenly,
                                  children: [
                                    ListView.builder(
                                      shrinkWrap: true,
                                      reverse: false,
                                      scrollDirection: Axis.horizontal,
                                      physics:
                                          const NeverScrollableScrollPhysics(),
                                      itemCount: lineUpMatchController
                                          .resData[1][index].length,
                                      itemBuilder: (context, indexPlayer) {
                                        double widthItem;

                                        if ((Device.get().isPhone)) {
                                          if (lineUpMatchController
                                                  .resData[1][index].length >
                                              4) {
                                            widthItem = 65.w;
                                          } else {
                                            widthItem = 82.w;
                                          }
                                        } else {
                                          if ((controller.isLandScape.value)) {
                                            if (lineUpMatchController
                                                    .resData[1][index].length <
                                                5) {
                                              widthItem = 50.w;
                                            } else {
                                              widthItem = 40.w;
                                            }
                                          } else {
                                            if (lineUpMatchController
                                                    .resData[1][index].length <
                                                5) {
                                              widthItem = 95.w;
                                            } else {
                                              widthItem = 75.w;
                                            }
                                          }
                                        }
                                        return Container(
                                          width: widthItem,
                                          margin: EdgeInsets.symmetric(
                                              horizontal: widthScreen /
                                                  lineUpMatchController
                                                      .resData[1][index]
                                                          [indexPlayer]
                                                      .length),
                                          child: GestureDetector(
                                            onTap: () {
                                              Get.toNamed(Routes.detailPlayer);
                                            },
                                            child: ItemLineUp(
                                                shirtNumber: lineUpMatchController
                                                        .resData[1][index]
                                                    [indexPlayer]['shirtNumber'],
                                                namePlayers: lineUpMatchController
                                                        .resData[1][index]
                                                    [indexPlayer]['playersName']),
                                          ),
                                        );
                                      },
                                    ),
                                  ],
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                      Container(
                        width: !Device.get().isTablet
                            ? Get.width
                            : controller.isLandScape.value == true
                                ? Get.width * 0.4081632
                                : Get.width * 0.838,
                        height: 25.h,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.symmetric(horizontal: 8),
                        child: Text(
                          '${lineUpMatchController.teams[1]['teamName']} \t ${lineUpMatchController.teams[1]['tactical']}',
                          style: TextStyleUtils.sizeText12Weight500()!
                              .copyWith(color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 8.h,
                ),
                Text(
                  'SUBSTITUTIONS',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white60),
                ),
                SizedBox(
                  height: 8.h,
                ),
                Container(
                  width: Get.width,
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.white60, width: 0.8),
                      borderRadius: BorderRadius.circular(8)),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        width: Get.width * 0.45,
                        child: ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Container(
                              margin: EdgeInsets.only(bottom: 10.h),
                              padding: EdgeInsets.symmetric(horizontal: 10.w),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    '10\'',
                                    style: TextStyleUtils.sizeText10Weight300()!
                                        .copyWith(color: Colors.white60),
                                  ),
                                  SizedBox(
                                    width: 10.w,
                                  ),
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      GestureDetector(
                                        onTap: () {
                                          Get.toNamed(Routes.detailPlayer);
                                        },
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            const Icon(
                                              Icons.arrow_circle_down,
                                              color: Colors.red,
                                            ),
                                            Text(
                                              'Players Name out',
                                              style: TextStyleUtils
                                                      .sizeText12Weight300()!
                                                  .copyWith(
                                                      color: Colors.white60),
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 8.h,
                                      ),
                                      GestureDetector(
                                        onTap: () {
                                          Get.toNamed(Routes.detailPlayer);
                                        },
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            const Icon(
                                              Icons.arrow_circle_up_rounded,
                                              color: Colors.green,
                                            ),
                                            Text(
                                              'Players Name in',
                                              style: TextStyleUtils
                                                      .sizeText12Weight500()!
                                                  .copyWith(
                                                      color: Colors.white),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            );
                          },
                        ),
                      ),
                      SizedBox(width: 10.w,),
                      SizedBox(
                        width: Get.width * 0.45,
                        child: ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemCount: 5,
                          itemBuilder: (context, index) {
                            return Container(
                              margin: EdgeInsets.only(bottom: 10.h),
                              padding: EdgeInsets.symmetric(horizontal: 10.w),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    '10\'',
                                    style: TextStyleUtils.sizeText10Weight300()!
                                        .copyWith(color: Colors.white60),
                                  ),
                                  SizedBox(
                                    width: 10.w,
                                  ),
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      GestureDetector(
                                        onTap: () {
                                          Get.toNamed(Routes.detailPlayer);
                                        },
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            const Icon(
                                              Icons.arrow_circle_down,
                                              color: Colors.red,
                                            ),
                                            Text(
                                              'Players Name out',
                                              style: TextStyleUtils
                                                      .sizeText12Weight300()!
                                                  .copyWith(
                                                      color: Colors.white60),
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 8.h,
                                      ),
                                      GestureDetector(
                                        onTap: () {
                                          Get.toNamed(Routes.detailPlayer);
                                        },
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            const Icon(
                                              Icons.arrow_circle_up_rounded,
                                              color: Colors.green,
                                            ),
                                            Text(
                                              'Players Name in',
                                              style: TextStyleUtils
                                                      .sizeText12Weight500()!
                                                  .copyWith(
                                                      color: Colors.white),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 12.h,
                ),
                Text(
                  'SUBSTITUTE PLAYERS',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white60),
                ),
                SizedBox(
                  height: 8.h,
                ),
                Container(
                  padding: EdgeInsets.symmetric(vertical: 10.h,),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.w),
                    border: Border.all(width: 0.8, color: Colors.white60),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        width: Get.width * 0.45,
                        child: ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemCount: 6,
                          itemBuilder: (context, index) {
                            return GestureDetector(
                              onTap: () {
                                Get.toNamed(Routes.detailPlayer);
                              },
                              child: Container(
                                margin: const EdgeInsets.only(bottom: 10),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      width: 10.w,
                                    ),
                                    Stack(
                                      children: [
                                        Container(
                                          alignment: Alignment.center,
                                          width: 35,
                                          height: 35,
                                          child: Container(
                                            width: 20,
                                            height: 20,
                                            decoration: BoxDecoration(
                                              border: Border.all(
                                                  color: Colors.white,
                                                  width: 1),
                                              borderRadius:
                                                  BorderRadius.circular(50),
                                            ),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '15',
                                              style: TextStyleUtils
                                                      .sizeText10Weight300()!
                                                  .copyWith(
                                                      color: Colors.white),
                                            ),
                                          ),
                                        ),
                                        Positioned(
                                          top: 0,
                                          left: 0,
                                          child: Icon(
                                            Icons.sports_soccer_rounded,
                                            size: 12.sp,
                                            color: Colors.white,
                                          ),
                                        ),
                                        Positioned(
                                          right: 0,
                                          bottom: 0,
                                          child: Icon(
                                            Icons.arrow_circle_up_rounded,
                                            size: 12.sp,
                                            color: Colors.green,
                                          ),
                                        ),
                                      ],
                                    ),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    Text(
                                      'Players Name in',
                                      style:
                                          TextStyleUtils.sizeText12Weight500()!
                                              .copyWith(color: Colors.white),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                      SizedBox(width: 10.w,),
                      SizedBox(
                        width: Get.width * 0.45,
                        child: ListView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemCount: 5,
                          itemBuilder: (context, index) {
                            return GestureDetector(
                              onTap: () {
                                Get.toNamed(Routes.detailPlayer);
                              },
                              child: Container(
                                margin: const EdgeInsets.only(bottom: 10),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      width: 10.w,
                                    ),
                                    Stack(
                                      children: [
                                        Container(
                                          alignment: Alignment.center,
                                          width: 35,
                                          height: 35,
                                          child: Container(
                                            width: 20,
                                            height: 20,
                                            decoration: BoxDecoration(
                                              border: Border.all(
                                                  color: Colors.white,
                                                  width: 1),
                                              borderRadius:
                                              BorderRadius.circular(50),
                                            ),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '15',
                                              style: TextStyleUtils
                                                  .sizeText10Weight300()!
                                                  .copyWith(
                                                  color: Colors.white),
                                            ),
                                          ),
                                        ),
                                        Positioned(
                                          top: 0,
                                          left: 0,
                                          child: Icon(
                                            Icons.sports_soccer_rounded,
                                            size: 12.sp,
                                            color: Colors.white,
                                          ),
                                        ),
                                        Positioned(
                                          right: 0,
                                          bottom: 0,
                                          child: Icon(
                                            Icons.arrow_circle_up_rounded,
                                            size: 12.sp,
                                            color: Colors.green,
                                          ),
                                        ),
                                      ],
                                    ),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    Text(
                                      'Players Name in',
                                      style:
                                      TextStyleUtils.sizeText12Weight500()!
                                          .copyWith(color: Colors.white),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 12.h,
                ),
                Text(
                  'COACHES',
                  style: TextStyleUtils.sizeText12Weight500()!
                      .copyWith(color: Colors.white60),
                ),
                SizedBox(
                  height: 8.h,
                ),
                Container(
                  width: Get.width,
                  height: 36.h,
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.white60, width: 0.8),
                      borderRadius: BorderRadius.circular(8)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                        child: Container(
                          alignment: Alignment.center,
                          width: Get.width * 0.45,
                          child: Text(
                            'Tú chè',
                            style:
                                TextStyle(color: Colors.white, fontSize: 12.sp),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          alignment: Alignment.center,
                          width: Get.width * 0.45,
                          child: Text(
                            'Cô lốp',
                            style:
                                TextStyle(color: Colors.white, fontSize: 12.sp),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 80.h,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
