import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/styles/app_color.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

class FilterScreen extends StatefulWidget {
  const FilterScreen({super.key});

  @override
  State<FilterScreen> createState() => _FilterScreenState();
}

class _FilterScreenState extends State<FilterScreen> {
  List actions = [
    AppText.deposit,
    AppText.withdrawal,
    AppText.yield,
    AppText.refund,
    AppText.investment,
  ];
  List selected = [
    false,
    false,
    false,
    false,
    false,
  ];
  int dateIndex = 0;
  int statusIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        scrolledUnderElevation: 0.0,
        centerTitle: true,
        title: Text(
          AppText.filterTitle,
          style: GoogleFonts.dmSans(
            color: const Color(0xFF272727),
            fontSize: 20.sp,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              AppText.byDate,
              style: GoogleFonts.dmSans(
                color: const Color(0xFF8D8D8D),
                fontSize: 12.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Radio<int>(
                  activeColor: AppColor.radioActiveColor,
                  value: 1,
                  groupValue: dateIndex,
                  onChanged: (int? value) {
                    setState(() {
                      dateIndex = value!;
                    });
                  },
                ),
                const Gap(3),
                Text(
                  AppText.date1,
                  style: GoogleFonts.dmSans(
                    color: const Color(0xFF272727),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Radio<int>(
                  activeColor: AppColor.radioActiveColor,
                  value: 2,
                  groupValue: dateIndex,
                  onChanged: (value) {
                    setState(() {
                      dateIndex = value!;
                    });
                  },
                ),
                const Gap(3),
                Text(
                  AppText.date2,
                  style: GoogleFonts.dmSans(
                    color: const Color(0xFF272727),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
            const Gap(10),
            Text(
              AppText.byAction,
              style: GoogleFonts.dmSans(
                color: const Color(0xFF8D8D8D),
                fontSize: 12.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            const Gap(15),
            Wrap(
              children: List.generate(
                actions.length,
                (int index) {
                  return Padding(
                    padding: const EdgeInsets.only(right: 12.0, bottom: 12.0),
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          for (var i = 0; i < selected.length; i++) {
                            selected[i] = false;
                          }
                          selected[index] = true;
                        });
                      },
                      child: Container(
                        height: 40.h,
                        padding: const EdgeInsets.symmetric(
                            vertical: 8, horizontal: 16),
                        decoration: BoxDecoration(
                          color: (selected[index] == true)
                              ? const Color(0xFFe6eff5)
                              : Colors.white,
                          borderRadius: BorderRadius.circular(16.r),
                          border: Border.all(
                              color: (selected[index] == true)
                                  ? const Color(0xFFe6eff5)
                                  : Colors.grey),
                        ),
                        child: Text(
                          actions[index],
                          style: GoogleFonts.dmSans(
                            color: (selected[index] == true)
                                ? const Color(0xFF0167B7)
                                : const Color(0xFF272727),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
            const Gap(10),
            Text(
              AppText.byStatus,
              style: GoogleFonts.dmSans(
                color: const Color(0xFF8D8D8D),
                fontSize: 12.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Radio<int>(
                  activeColor: AppColor.radioActiveColor,
                  value: 1,
                  groupValue: statusIndex,
                  onChanged: (int? value) {
                    setState(() {
                      statusIndex = value!;
                    });
                  },
                ),
                const Gap(3),
                Text(
                  AppText.all,
                  style: GoogleFonts.dmSans(
                    color: const Color(0xFF272727),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Radio<int>(
                  activeColor: AppColor.radioActiveColor,
                  value: 2,
                  groupValue: statusIndex,
                  onChanged: (value) {
                    setState(() {
                      statusIndex = value!;
                    });
                  },
                ),
                const Gap(3),
                Text(
                  AppText.onHold,
                  style: GoogleFonts.dmSans(
                    color: const Color(0xFF272727),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
            const Gap(10),
            GestureDetector(
              onTap: () {
                setState(() {
                  dateIndex = 0;
                  statusIndex = 0;
                  for (var i = 0; i < selected.length; i++) {
                    selected[i] = false;
                  }
                });
              },
              child: TextWidget().text14W700(
                AppText.clear,
                clr: const Color(0xFF363636),
                textDecoration: TextDecoration.underline,
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Container(
          margin: const EdgeInsets.all(10.0),
          height: 65.h,
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(22.r),
            color: const Color(0xFF004717),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            child: Center(
              child: Text(
                AppText.Submit,
                style: GoogleFonts.dmSans(
                  color: Colors.white,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
