import 'package:betting/view/mobile/favourites_view/matches_view/list_fixtures/fixtures_screen.dart';
import 'package:betting/view/mobile/favourites_view/matches_view/list_results/result_screen.dart';
import 'package:betting/view/mobile/favourites_view/matches_view/matches_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class MatchesScreen extends StatelessWidget {
  MatchesScreen({super.key});

  final matchesController = Get.put(MatchesController());

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: 10.h,
          ),
          SizedBox(
            height: 25.h,
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: matchesController.options.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) {
                return Obx(
                  () => GestureDetector(
                    onTap: () {
                      matchesController.indexClick.value = index;
                      matchesController.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: matchesController.indexClick.value == index ? Colors.white : Colors.transparent,
                          borderRadius: BorderRadius.circular(24.r),
                          border: Border.all(
                              color: matchesController.indexClick.value == index ?
                              Colors.transparent : Colors.white60)),
                      alignment: Alignment.center,
                      child: Text(matchesController.options[index],
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: matchesController.indexClick.value == index
                                  ? Colors.black : Colors.white54,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w600)),
                    ),
                  ),
                );
              },
            ),
          ),
          const SizedBox(
            height: 25,
          ),
          Expanded(
            child: PageView(
              controller: matchesController.pageController,
              onPageChanged: (value) {
                matchesController.onPageViewChange(value);
              },
              physics: const NeverScrollableScrollPhysics(),
              allowImplicitScrolling: false,
              children: [
                FixturesScreen(),
                ResultScreen(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
