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/competitions_view/competitions_controller.dart';
import 'package:betting/view/mobile/favourites_view/item_widget/item_widget.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 CompetitionsScreen extends StatelessWidget {
  CompetitionsScreen({Key? key}) : super(key: key);
  final competitionController = Get.put(CompetitionsController());

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

        return RefreshIndicator(
          onRefresh: () async {
            competitionController.onRefresh();

          },
          color: ColorUtils.PRIMARY_COLOR,
          child: SingleChildScrollView(
            controller: competitionController.controllerEx,
            physics: const AlwaysScrollableScrollPhysics(),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 15.h,),
                Obx(() =>   GridView.builder(
                  scrollDirection: Axis.vertical,
                  itemCount:  competitionController.listCompetitionsFavourites.length,
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 10,
                      crossAxisCount: 2),
                  itemBuilder: (context, index) {
                    return
                      Obx(() => GestureDetector(
                        onTap: () {
                          Get.toNamed(Routes.detailTournamentPage,
                            arguments: competitionController.listCompetitionsFavourites[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.bottomCenter,
                                end: Alignment.topCenter,
                                tileMode: TileMode.repeated,
                              ),
                              borderRadius: const BorderRadius.all(Radius.circular(8))),
                          child:
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Container(
                                    padding: const EdgeInsets.only(left: 20, top: 10),
                                    child: Image.network('https://upload.wikimedia.org/wikipedia/vi/thumb/5/5c/Chelsea_crest.svg/1200px-Chelsea_crest.svg.png',
                                      height: 45,
                                      width: 45,
                                    ),
                                  ),
                                  GestureDetector(
                                    onTap: () {
                                      competitionController.deleteCompetitionsFavorites(competitionController.listCompetitionsFavourites[index].id!);
                                      competitionController.listCompetitions.firstWhere((element) => element.id == competitionController.listCompetitionsFavourites[index].id).favourite = false;
                                      competitionController.listCompetitions.refresh();
                                      competitionController.listCompetitionsFavourites.refresh();
                                      competitionController.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,
                                        )),
                                  ),
                            ],
                          ),
                              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('${competitionController.listCompetitionsFavourites[index].name}',
                                      softWrap: true,
                                      maxLines: 3,
                                      style: TextStyleUtils.sizeText12Weight600()!.copyWith(color: Colors.white),
                                    ),
                                    Text(
                                      competitionController.listCompetitionsFavourites[index].country!.name!,
                                      style: TextStyleUtils.sizeText10Weight400()!.copyWith(color: Colors.white),
                                    ),
                                  ],
                                ),
                              )

                            ],
                          ),
                        ),
                      ));

                  },)),
                  const SizedBox(
                    height: 10,
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    child: Text(
                      'Favourites what matters to you',
                      style: TextStyleUtils.sizeText16Weight500()!
                          .copyWith(color: Colors.white),
                    ),
                  ),
                  const SizedBox(height: 8,),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    child: Text(
                      'Competitions will appear at the top of your Score tab',
                      style: TextStyleUtils.sizeText11Weight400()!.copyWith(color: Colors.white),
                    ),
                  ),
                  SizedBox(height: 10.h,),
                  GestureDetector(
                    onTap: () {
                      //competitionController.getListCompetitions('');
                      showSearchView();
                    },
                    child: Container(
                      height: 35.h,
                      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 competition',
                            style: TextStyleUtils.sizeText13Weight500()!
                                .copyWith(color: Colors.white),
                          ),
                          Icon(
                            Icons.navigate_next,
                            size: 20.sp,
                            color: Colors.white,
                          ),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(height: 10.h,),
                  Obx(() => ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: competitionController.listCompetitions.length,
                      itemBuilder: (context, index) {
                        return Obx(
                              () => ItemWidget(
                              logo: competitionController.listCompetitions[index].logo,
                              name: competitionController.listCompetitions[index].name!,
                              nation: competitionController.listCompetitions[index].country != null
                                  ? competitionController.listCompetitions[index].country!.name! : "",
                                  funcFavorite: () => competitionController.addFavourite(context, index),
                                  isFavorite: competitionController.listCompetitions[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: () {
                      competitionController.getListCompetitions('');
                      Get.back();
                    },
                  ),
                  Expanded(
                    child: Obx(() => TextFormField(
                      cursorColor: Colors.white54, 
                      controller: competitionController.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: competitionController.isShowClear.value ?
                          IconButton(splashColor: Colors.transparent,
                            onPressed: () {
                            competitionController.textSearchController.clear();
                            competitionController.isShowClear.value = false;
                            competitionController.getListCompetitions(competitionController.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) {
                            competitionController.isShowClear.value = true;
                          } else {
                            competitionController.isShowClear.value = false;
                          }

                          competitionController.getListCompetitions(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: competitionController.controllerSearchEx,
                itemCount: competitionController.listCompetitions.length,
                itemBuilder: (context, index) {
                  return ItemWidget(
                    logo: competitionController.listCompetitions[index].logo,
                    name: competitionController.listCompetitions[index].name!,
                    nation: competitionController.listCompetitions[index].country != null ?
                    competitionController.listCompetitions[index].country!.name! : '',
                    funcFavorite: () => competitionController.addFavourite(context, index), 
                    isFavorite: competitionController.listCompetitions[index].favourite!,);
                  },
                ),
              ),
            ),
          ],
        ),
      )
    ).whenComplete(() => competitionController.textSearchController.clear());
  }
}
