
import 'package:betting/commom/utils/color_utils.dart';
import 'package:betting/routes/app_pages.dart';
import 'package:betting/view/mobile/home_page/setting_notify/setting_notify_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';


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

  SettingNotifyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return  GetBuilder<SettingNotifyController>(builder: (controller) {
      return Stack(
        children: [
          Image.asset(
            "assets/images/background_app_betting.jpg",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.transparent,
              bottom: const PreferredSize(preferredSize: Size(double.infinity, 1), child: Divider(color: Colors.white,)),
              title: const Text("Notifications",style: TextStyle(color: Colors.white),),
              centerTitle: true,
            ),
            backgroundColor: Colors.transparent,
            resizeToAvoidBottomInset: true,
            body: Container(
              margin: EdgeInsets.only(bottom: 24.h,right: 16.w,left: 16.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 8.h,),
               InkWell(
                 onTap: (){
                   Get.toNamed(Routes.notificationsPreferences);
                 },
                 child:    Row(
                   children: [
                     Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
                         Text('Notification Preferences', style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                         Text('Manage the different types of notifications you receive', style: TextStyle(color: Colors.white24, fontSize: 10.sp, fontWeight: FontWeight.w400),),

                       ],
                     ),
                     const Spacer(),
                     Icon(Icons.navigate_next, size: 24.sp,color: Colors.white,)
                   ],
                 ),
               ),
                  SizedBox(height: 8.h,),
                  Column(
                    children: [
                      Row(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('Match Alerts', style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                              Text('Get instance notifications for different match event', style: TextStyle(color: Colors.white24, fontSize: 10.sp, fontWeight: FontWeight.w400),),

                            ],
                          ),
                          const Spacer(),
                          Obx(() =>
                              SizedBox(
                                child:
                                Transform.scale(scale: 0.6, child: CupertinoSwitch(
                                    activeColor: ColorUtils.PRIMARY_COLOR,
                                    value: controller.isShowFavourites.value,
                                    onChanged:(value){
                                      controller.isShowFavourites.value =! controller.isShowFavourites.value;
                                    }),),
                              )
                          )

                        ],
                      ),
                     Obx(() =>  Visibility(
                         visible: controller.isShowFavourites.value,
                         child:
                         ListView.builder(
                           shrinkWrap: true,
                           itemCount: 3,
                           itemBuilder: (context, index) {
                             return
                              InkWell(
                                onTap:(){
                                  Get.toNamed(Routes.category);
                                },
                                child:
                                Container(
                                  margin: EdgeInsets.symmetric(vertical: 4.h),
                                  child: Row(
                                    children: [
                                      Icon(Icons.sports_soccer_rounded, size: 24.w,color: Colors.white,),
                                      SizedBox(width: 8.w,),
                                      Text('Football', style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                                      const Spacer(),
                                      Icon(Icons.navigate_next, size: 24.sp,color: Colors.white,),
                                    ],
                                  ),
                                ),
                              );
                           },)))
                    ],
                  ),
                  SizedBox(height: 8.h,),
                  InkWell(
                    onTap: (){
                      Get.toNamed(Routes.inAppNotification);
                    },
                    child: Row(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('In-App Notifications', style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),),
                          Text('Change the alerts you receive whilst using Betting', style: TextStyle(color: Colors.white24, fontSize: 10.sp, fontWeight: FontWeight.w400),),

                        ],
                      ),
                      const Spacer(),
                      Icon(Icons.navigate_next, size: 24.sp,color: Colors.white,)
                    ],
                  ),)
                ],
              ),
            ),
          )
        ],
      );
    },);
  }
}
