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: [
                  Obx(
                    () => Wrap(
                      crossAxisAlignment: WrapCrossAlignment.start,
                      spacing: 10,
                      children: teamsScreenController.favouriteTeams.asMap().entries.map((entry) {
                        return GestureDetector(
                          onTap: () {
                            Get.toNamed(
                              Routes.detailTeams, arguments: teamsScreenController.favouriteTeams[entry.key]
                            );
                          },
                          child: Container(
                            margin: const EdgeInsets.only(top: 15, left: 5),
                            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[entry.key]!.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[entry.key]!.name}',
                                            softWrap: true,
                                            maxLines: 3,
                                            style: TextStyleUtils.sizeText12Weight600()!.copyWith(color: Colors.white),
                                          ),
                                          Text(
                                            teamsScreenController.favouriteTeams[entry.key]!.country.name,
                                            style: TextStyleUtils.sizeText10Weight400()!.copyWith(color: Colors.white),
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                                GestureDetector(
                                  onTap: () {
                                    teamsScreenController.deleteFavouriteTeam(teamsScreenController.favouriteTeams[entry.key].id);
                                    teamsScreenController.teams.firstWhere((element) => element.id == teamsScreenController.favouriteTeams[entry.key].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,
                                      )),
                                ),
                              ],
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                  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());
  }
}
