import 'package:betting/view/mobile/favourites_view/teams/team_info_view/matches_view/fixtures_team_info/fixtures_team_info.dart';
import 'package:betting/view/mobile/favourites_view/teams/team_info_view/matches_view/matches_controller.dart';
import 'package:betting/view/mobile/favourites_view/teams/team_info_view/matches_view/result_team_info/result_team_info.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class MatchesView extends StatefulWidget {
  const MatchesView({Key? key}) : super(key: key);

  @override
  State<MatchesView> createState() => _MatchesViewState();
}

class _MatchesViewState extends State<MatchesView> {
  final matchesTeamInfoController = Get.put(MatchesTeamInfoController());

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: SizedBox(
        height: Get.height,
        width: Get.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 10.h,
            ),
            Row(
              children: [
                DropdownButtonHideUnderline(
                  child: DropdownButton2<Tournament>(
                    dropdownWidth: 200.w,
                    items: matchesTeamInfoController.tournaments.map(
                          (Tournament item) => DropdownMenuItem<Tournament>(
                            value: item,
                            child: Row(
                              children: [
                                Image.network(
                                  item.icon,
                                  width: 25,
                                  height: 20,
                                ),
                                SizedBox(
                                  width: 10.w,
                                ),
                                Text(
                                  item.tournamentName,
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.blue,
                                  ),
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ],
                            ),
                          ),
                        ).toList(),
                    value: matchesTeamInfoController.selectedTournament.value,
                    onChanged: (Tournament? value) {
                      setState(() {
                        matchesTeamInfoController.selectedTournament.value = value;
                      });
                    },
                    selectedItemBuilder: (BuildContext context) {
                      return matchesTeamInfoController.tournaments.map<Widget>((Tournament? tournament) {
                        if (tournament == null) {
                          return const SizedBox.shrink();
                        }

                        int index = matchesTeamInfoController.tournaments.indexOf(tournament);
                        bool isFirstElement = index == 0;

                        return Row(
                          children: [
                            ClipRRect(
                              borderRadius: !isFirstElement? BorderRadius.circular(6): BorderRadius.circular(0),
                              child: Image.network(
                                tournament.icon,
                                width: 30,
                                height: 20,
                                color: isFirstElement? Colors.white : null,
                              ),
                            ),
                          ],
                        );
                      }).toList();
                    },
                    icon: const Icon(
                      Icons.arrow_drop_down,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(
                  width: 10.w,
                ),
                Obx(
                  () => Text(matchesTeamInfoController.selectedTournament.value!.tournamentName,
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 10.h,
            ),
            SizedBox(
              height: 30,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: matchesTeamInfoController.options.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Obx(() => GestureDetector(
                    onTap: () {
                      matchesTeamInfoController.indexClick.value = index;
                      matchesTeamInfoController.pageController.animateToPage(index, duration: const Duration(seconds: 1), curve: Curves.easeOutBack);
                      },
                    child: Container(
                      margin: const EdgeInsets.only(right: 8),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 12, vertical: 0),
                      decoration: BoxDecoration(
                          color: matchesTeamInfoController.indexClick.value == index
                              ? Colors.white
                              : Colors.transparent,
                          borderRadius: BorderRadius.circular(24.r),
                          border: Border.all(
                              color: matchesTeamInfoController.indexClick.value == index
                                  ? Colors.transparent
                                  : Colors.white60)),
                          alignment: Alignment.center,
                          child: Text(
                              matchesTeamInfoController.options[index],
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: matchesTeamInfoController.indexClick.value == index
                                      ? Colors.black
                                      : Colors.white54,
                                  fontSize: 14,
                                  fontWeight: FontWeight.w600)),
                        ),
                      ));
                },
              ),
            ),
            const SizedBox(
              height: 25,
            ),
            Expanded(
              child: PageView(
                controller: matchesTeamInfoController.pageController,
                onPageChanged: (value) {
                  matchesTeamInfoController.onPageViewChange(value);
                },
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  FixturesTeamInfo(),
                  ResultTeamInfo(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
