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/favourites_view/item_widget/item_widget.dart';
import 'package:betting/view/mobile/favourites_view/teams/switch_controller.dart';
import 'package:betting/view/mobile/favourites_view/teams/teams_screen_controller.dart';
import 'package:flutter/cupertino.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 TeamsScreen extends StatelessWidget {
  TeamsScreen({Key? key}) : super(key: key);
  final teamsScreenController = Get.put(TeamsScreenController());
  final switchController = Get.put(SwitchController());

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (BuildContext context, Orientation orientation) {
        bool isLandScape = false;
        if (Device.get().isTablet) {
          if (orientation == Orientation.portrait) {
            isLandScape = false;
          } else {
            isLandScape = true;
          }
        } else {
          isLandScape = false;
        }

        return RefreshIndicator(
          color: ColorUtils.PRIMARY_COLOR,
          onRefresh: () async {
            teamsScreenController.onRefresh();

          },
          child: SingleChildScrollView(
            controller: teamsScreenController.controllerEx,
            physics: const AlwaysScrollableScrollPhysics(),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 15.h,),
                 Obx(() =>  GridView.builder(
                   shrinkWrap: true,
                   physics: const NeverScrollableScrollPhysics(),
                   itemCount: teamsScreenController.favouriteTeams.length,
                   gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                       crossAxisCount: 2,
                       mainAxisSpacing: 10,
                       crossAxisSpacing: 10
                   ), itemBuilder:(context, index) {
                   return
                     Obx(() =>  GestureDetector(
                       onTap: () {
                         Get.toNamed(
                             Routes.detailTeams, arguments: teamsScreenController.favouriteTeams[index]
                         );
                       },
                       child: Container(
                         height: !Device.get().isTablet
                             ? Get.width * 0.45
                             : (isLandScape) ? Get.width / 6 - 49 : Get.width / 4 - 20,
                         width: !Device.get().isTablet
                             ? Get.width * 0.45
                             : (isLandScape) ? Get.width / 6 - 49 : Get.width / 4 - 20,
                         decoration: BoxDecoration(
                           gradient: LinearGradient(
                             colors: [
                               Colors.blue.shade900,
                               Colors.blue.shade300
                             ],
                             begin: Alignment.bottomLeft,
                             end: Alignment.topRight,
                             tileMode: TileMode.repeated,
                           ),
                           borderRadius: const BorderRadius.all(Radius.circular(8),),
                         ),
                         child: Row(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [
                             Column(
                               mainAxisAlignment:
                               MainAxisAlignment.spaceBetween,
                               crossAxisAlignment: CrossAxisAlignment.start,
                               children: [
                                 Container(
                                   padding: const EdgeInsets.only(
                                       left: 20, top: 10),
                                   child: Image.network(
                                     teamsScreenController.favouriteTeams[index]!.logo ?? 'https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                     height: 45,
                                     width: 45,
                                   ),
                                 ),
                                 Container(
                                   width: !Device.get().isTablet ? Get.width * 0.45 - 45 : (isLandScape) ? (Get.width / 6 - 50) - 45 : (Get.width / 4 - 20) - 45,
                                   padding: const EdgeInsets.only(left: 10, bottom: 10),
                                   child: Column(
                                     crossAxisAlignment: CrossAxisAlignment.start,
                                     children: [
                                       Text('${teamsScreenController.favouriteTeams[index]!.name}',
                                         softWrap: true,
                                         maxLines: 3,
                                         style: TextStyleUtils.sizeText12Weight600()!.copyWith(color: Colors.white),
                                       ),
                                       Text(
                                         teamsScreenController.favouriteTeams[index]!.country.name,
                                         style: TextStyleUtils.sizeText10Weight400()!.copyWith(color: Colors.white),
                                       ),
                                     ],
                                   ),
                                 )
                               ],
                             ),
                             GestureDetector(
                               onTap: () {
                                 teamsScreenController.deleteFavouriteTeam(teamsScreenController.favouriteTeams[index].id);
                                 teamsScreenController.teams.firstWhere((element) => element.id == teamsScreenController.favouriteTeams[index].id).favourite = false;
                                 teamsScreenController.favouriteTeams.refresh();
                                 teamsScreenController.teams.refresh();
                                 teamsScreenController.update();
                               },
                               child: Container(
                                   margin: const EdgeInsets.only(right: 20, top: 20),
                                   width: 25,
                                   height: 25,
                                   decoration: const BoxDecoration(
                                     color: Colors.grey,
                                     borderRadius: BorderRadius.all(
                                       Radius.circular(20),
                                     ),
                                   ),
                                   child: const Icon(
                                     Icons.star_rounded,
                                     color: ColorUtils.PRIMARY_COLOR,
                                     size: 19,
                                   )),
                             ),
                           ],
                         ),
                       ),
                     ));
                 },)),
                  const SizedBox(
                    height: 10,
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                    width: double.infinity,
                    decoration: BoxDecoration(
                     borderRadius: const BorderRadius.all(Radius.circular(8),),
                     border: Border.all(width: 0.8, color: Colors.white54)),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: Text('Favourites what matters to you',
                            style: TextStyleUtils.sizeText12Weight500()!.copyWith(color: Colors.white),
                          ),
                        ),
                        SizedBox(height: 8.h,),
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: Text('Get notified for your favourite team',
                            style: TextStyleUtils.sizeText10Weight400()!.copyWith(color: Colors.white),
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  GestureDetector(
                    onTap: () async {
                      teamsScreenController.getListTeam('');
                      showSearchView();
                    },
                    child: Container(
                      height: 45,
                      alignment: Alignment.center,
                      width: double.infinity,
                      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
                      decoration: BoxDecoration(
                        color: Colors.white12,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('Search for your teams',
                            style: TextStyleUtils.sizeText13Weight500()!.copyWith(color: Colors.white),),
                          Icon(Icons.navigate_next,
                            size: 20.sp,
                            color: Colors.white,
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Obx(() => ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: teamsScreenController.teams.length,
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: () {
                            if (teamsScreenController.teams[index].favourite == true) {
                              Get.toNamed(Routes.detailTeams, arguments: teamsScreenController.teams[index]);
                            }
                          },
                          child: Obx(
                            () => ItemWidget(
                              logo: teamsScreenController.teams[index].logo,
                              name: teamsScreenController.teams[index].name,
                              nation: teamsScreenController.teams[index].country.name,
                              funcFavorite: () => teamsScreenController.addFavouriteTeam(context, index, switchController),
                              isFavorite: teamsScreenController.teams[index].favourite,),
                          ),
                        );
                      },
                  ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  void showSearchView() {
    Get.dialog(Container(
      color: const Color(0xFF212121),
      padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
      width: Get.width,
      height: Get.height,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: Get.height * 0.1,
            width: Get.width,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  icon: const Icon(
                    Icons.arrow_back_ios_new_rounded,
                    size: 18,
                    color: Colors.white54,
                  ),
                  onPressed: () {
                    teamsScreenController.getListTeam('');
                    Get.back();
                  },
                ),
                Expanded(
                  child: Obx(
                    () => TextFormField(
                      cursorColor: Colors.white54,
                      controller: teamsScreenController.textSearchController,
                      decoration: InputDecoration(
                          hintText: 'Search',
                          hintStyle: TextStyleUtils.sizeText13Weight500()!.copyWith(color: Colors.white54),
                          enabledBorder: InputBorder.none,
                          focusedBorder: const UnderlineInputBorder(borderSide: BorderSide(color: Colors.grey, width: 1)),
                          suffixIcon: teamsScreenController.isShowClear.value ?
                          IconButton(
                            splashColor: Colors.transparent,
                            onPressed: () {
                              teamsScreenController.textSearchController.clear();
                              teamsScreenController.isShowClear.value = false;
                              teamsScreenController.getListTeam(teamsScreenController.textSearchController.value.text);
                              },
                            icon: Icon(CupertinoIcons.clear_circled_solid, size: 18.sp, color: Colors.white,),) : null),
                      style: TextStyleUtils.sizeText12Weight500()!.copyWith(color: Colors.white),
                      onChanged: (value) {
                        if (value.isNotEmpty) {
                          teamsScreenController.isShowClear.value = true;
                        } else {
                          teamsScreenController.isShowClear.value = false;
                        }

                        teamsScreenController.getListTeam(value);
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 8),
            height: 20,
            child: Text('POPULAR', style: TextStyleUtils.sizeText14Weight500()!.copyWith(color: Colors.white),),
          ),
          const SizedBox(
            height: 10,
          ),
          Expanded(
            child: Obx(
              () => ListView.builder(
                shrinkWrap: true,
                controller: teamsScreenController.controllerSearchScroll,
                physics: const BouncingScrollPhysics(),
                itemCount: teamsScreenController.teams.length,
                itemBuilder: (context, index) {
                  return Obx(
                    () => ItemWidget(
                        logo: teamsScreenController.teams[index].logo,
                        name: teamsScreenController.teams[index].name,
                        nation: teamsScreenController.teams[index].country.name, 
                      funcFavorite: () => teamsScreenController.addFavouriteTeam(context, index, switchController),
                      isFavorite: teamsScreenController.teams[index].favourite,
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    ),
    ).whenComplete(() => teamsScreenController.textSearchController.clear());
  }
}
