import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../commom/utils/color_utils.dart';
import '../../../../commom/utils/toast_bettings.dart';
import '../../../../routes/app_pages.dart';
import 'notification_settings_controller.dart';


class NotificationSettingsPage extends GetView<NotificationSettingsController> {
  @override
  final controller = Get.put(NotificationSettingsController());

  NotificationSettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/background_app_betting.jpg"),
            fit: BoxFit.cover,
          ),
        ),

        padding: EdgeInsets.only(bottom: 24.h, right: 16.w, left: 16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      height: 32.h,
                    ),
                    Row(
                      children: [
                        IconButton(onPressed: () {
                          Get.back();
                        }, icon: const Icon(Icons.arrow_back_ios_new_outlined,color: Colors.white,)),
                        Text("2 of 3", style: TextStyle(color: Colors.white54,fontSize: 14.sp)),
                      ],
                    ),
                    SizedBox(
                      height: 8.h,
                    ),
                    Text("Notifications",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 24.sp,
                            color: Colors.white,
                            fontFamily: 'assets/font/static/Inter-Medium.ttf',
                            fontWeight: FontWeight.w500)),
                    SizedBox(
                      height: 8.h,
                    ),
                    Text("Choose the alerts you want",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: Colors.white54,

                        )),
                    SizedBox(
                      height: 16.h,
                    ),
                    SizedBox(
                      height: 30.h,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: controller.listTitle.length,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) {
                          return Obx(() => InkWell(
                            onTap: () {
                              controller.indexClick.value = index;
                            },
                            child: Container(
                              margin: EdgeInsets.only(right: 8.w),
                              padding: EdgeInsets.symmetric(
                                  horizontal: 12.w, vertical: 0.h),
                              decoration: BoxDecoration(
                                  color: controller.indexClick.value == index
                                      ? Colors.white
                                      : Colors.transparent,
                                  borderRadius: BorderRadius.circular(24.r)),
                              alignment: Alignment.center,
                              child: Text(controller.listTitle[index],
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color:
                                      controller.indexClick.value == index
                                          ? Colors.black
                                          : Colors.white54,
                                      fontSize: 14.sp,
                                      fontWeight: FontWeight.w600)),
                            ),
                          ));
                        },
                      ),
                    ),
                    SizedBox(
                      height: 16.h,
                    ),
                    Row(
                      children: [
                        Text("ALERT TYPE",style: TextStyle( fontSize: 14.sp,
                            color: Colors.white54,
                            fontWeight: FontWeight.bold),),
                        const Spacer(),
                        SizedBox(
                          width: 54.w,
                          child: Text("MATCH",style: TextStyle( fontSize: 14.sp,
                              color: Colors.white54,
                              fontWeight: FontWeight.bold),),
                        ),
                        SizedBox(width: 16.w,),
                        SizedBox(
                          width: 50.w,
                          child: Text("NEWS",style: TextStyle( fontSize: 14.sp,
                              color: Colors.white54,
                              fontWeight: FontWeight.bold),),
                        ),
                      ],
                    ),
                    SizedBox(height: 16.h,),
                    Expanded(child: ListView.builder(
                      itemCount: controller.listTeamFollow.length,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        return Obx(() => Container(
                          margin: EdgeInsets.only(bottom: 2.h),
                          padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 8.h),
                          decoration: BoxDecoration(
                            color: Colors.white10,
                            borderRadius: BorderRadius.circular(6.r),
                          ),
                          child: Row(
                            children: [
                              SizedBox(
                                height: 24.h,
                                width: 24.h,
                                child: const CircleAvatar(
                                  child: Icon(Icons.logo_dev_outlined),
                                ),
                              ),
                              SizedBox(width: 8.w,),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(controller.listTeamFollow[index].name!,style: TextStyle(color: Colors.white,fontSize: 14.sp,fontWeight: FontWeight.bold),),
                                  Text(controller.listTeamFollow[index].country!.name!,style: TextStyle(color: Colors.white54,fontSize: 14.sp),),
                                ],
                              ),
                              const Spacer(),
                              Container(
                                alignment: Alignment.centerRight,
                                width: 54.w,
                                child: InkWell(
                                  onTap: () {
                                    controller.listNotificationMatch[index] = !controller.listNotificationMatch[index];
                                    showToast(
                                        context,
                                        controller.listNotificationNews[index] == true,
                                        "Match notifications on",
                                        "Match notifications off",
                                        const Icon(Icons.notifications_on_rounded,color: ColorUtils.PRIMARY_COLOR,),
                                        const Icon(Icons.notifications_off_outlined,color: Colors.black,)
                                    );
                                  },
                                  child: controller.listNotificationMatch[index]
                                      ?const Icon(Icons.notifications_on_rounded,color: ColorUtils.PRIMARY_COLOR,)
                                      :const Icon(Icons.notifications_off_outlined,color: ColorUtils.PRIMARY_COLOR,),
                                ),
                              ),
                              SizedBox(width: 16.w,),
                              Container(
                                alignment: Alignment.centerRight,
                                width: 50.w,
                                child: InkWell(
                                  onTap: () {
                                    controller.listNotificationNews[index] = !controller.listNotificationNews[index];
                                    showToast(
                                        context,
                                        controller.listNotificationNews[index] == true,
                                        "News notifications on",
                                        "News notifications off",
                                        const Icon(Icons.notifications_on_rounded,color: ColorUtils.PRIMARY_COLOR,),
                                        const Icon(Icons.notifications_off_outlined,color: Colors.black,)
                                    );
                                  },
                                  child: controller.listNotificationNews[index]
                                      ?const Icon(Icons.notifications_on_rounded,color: ColorUtils.PRIMARY_COLOR,)
                                      :const Icon(Icons.notifications_off_outlined,color: ColorUtils.PRIMARY_COLOR,),
                                ),
                              ),
                            ],
                          ),
                        ));
                      },))

                  ],
                )),
            SizedBox(
              height: 16.h,
            ),
            SizedBox(
              width: double.infinity,
              height: 32.h,
              child: ElevatedButton(
                  onPressed: () {
                    Get.toNamed(Routes.addCompetitionsPage);
                    controller.addTeamFollow();
                  },
                  style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(6)),
                      backgroundColor: ColorUtils.PRIMARY_COLOR),
                  child: Text(
                    "Next",
                    style: TextStyle(fontSize: 16.sp, color: Colors.black),
                  )),
            )
          ],
        ),
      ),
    );
  }
}
