import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/routes/route_name.dart';
import 'package:tanami_app/core/routes/routes.dart';
import 'package:tanami_app/core/styles/app_text.dart';

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

  @override
  State<WalletScreen> createState() => _WalletScreenState();
}

class _WalletScreenState extends State<WalletScreen> {
  List data = [
    {
      'title': AppText.deposit,
      'subTitle': '',
      'dateTime': '10/04/2024 22:04',
      'value': '+ SAR 100,000',
      'subValue': '',
      'onHold': false,
    },
    {
      'title': AppText.withdrawal,
      'subTitle': '',
      'dateTime': '10/04/2024 22:04',
      'value': '- SAR 100,000',
      'subValue': '',
      'onHold': true,
    },
    {
      'title': AppText.investment,
      'subTitle': 'Name of Investment',
      'dateTime': '10/04/2024 22:04',
      'value': '- SAR 100,000',
      'subValue': '',
      'onHold': false,
    },
    {
      'title': AppText.yield,
      'subTitle': 'Name of Investment',
      'dateTime': '10/04/2024 22:04',
      'value': '+ SAR 100,000',
      'subValue': '+ \$100,00',
      'onHold': false,
    },
    {
      'title': AppText.refund,
      'subTitle': '',
      'dateTime': '10/04/2024 22:04',
      'value': '- SAR 100,000',
      'subValue': '',
      'onHold': true,
    },
  ];

  @override
  void initState() {
    // TODO: implement initState
    // _savebottomsheet();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        scrolledUnderElevation: 0.0,
        automaticallyImplyLeading: false,
        toolbarHeight: 260.h,
        titleSpacing: 22.w,
        title: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              AppText.walletTitle,
              style: GoogleFonts.dmSans(
                color: const Color(0xFF343434),
                fontSize: 14.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            SizedBox(
              height: 4.h,
            ),
            Text(
              'SAR 178,000',
              style: GoogleFonts.dmSans(
                color: const Color(0xFF191B1E),
                fontSize: 28.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            SizedBox(
              height: 80.h,
            )
          ],
        ),
        flexibleSpace: FlexibleSpaceBar(
          background: Stack(
            children: [
              Image.asset(
                'assets/images/wallet_screen/bg.png', // Replace with your image asset
                fit: BoxFit.fitWidth,
                alignment: Alignment.topCenter,
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.8),
                      borderRadius:
                          const BorderRadius.all(Radius.circular(20.0)),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 20.0, vertical: 20.0),
                      child: IntrinsicHeight(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            GestureDetector(
                              onTap: () {
                                goRouter.pushNamed(RouteName.depositScreen);
                              },
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Container(
                                    decoration: const BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: Colors.black,
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Image.asset(
                                        'assets/images/wallet_screen/deposit.png',
                                        height: 20.h,
                                      ),
                                    ),
                                  ),
                                  Text(
                                    'Deposit',
                                    style: GoogleFonts.dmSans(
                                      color: const Color(0xFF363636),
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.w700,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            const VerticalDivider(
                              color: Colors.black,
                              width: 20.0,
                            ),
                            GestureDetector(
                              onTap: () {
                                goRouter.pushNamed(RouteName.withdrawalScreen);
                              },
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Container(
                                    decoration: const BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: Colors.black,
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Image.asset(
                                        'assets/images/wallet_screen/withdraw.png',
                                        height: 20.h,
                                      ),
                                    ),
                                  ),
                                  Text(
                                    'Withdraw',
                                    style: GoogleFonts.dmSans(
                                      color: const Color(0xFF363636),
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.w700,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
        backgroundColor: Colors
            .transparent, // Make the AppBar transparent to show the background image
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(18.0, 10.0, 18.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  AppText.day,
                  style: GoogleFonts.dmSans(
                    color: const Color(0xFF8D8D8D),
                    fontSize: 11.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Row(
                  children: [
                    Container(
                      decoration: const BoxDecoration(
                        color: Color(0xFFF6F6F6),
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Image.asset(
                          'assets/images/wallet_screen/search.png',
                          height: 20.h,
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 5.w,
                    ),
                    GestureDetector(
                      onTap: () {
                        goRouter.pushNamed(RouteName.filterScreen);
                      },
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Color(0xFFF6F6F6),
                          borderRadius: BorderRadius.all(Radius.circular(12.0)),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Image.asset(
                            'assets/images/wallet_screen/filter.png',
                            height: 20.h,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 10.h,
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.only(bottom: 10.0),
                    child: GestureDetector(
                      onTap: () {
                        goRouter.pushNamed(RouteName.walletDetails,
                            pathParameters: {
                              "type": data[index]['title'],
                            });
                      },
                      child: Container(
                        height: 92.h,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(22.r),
                          color: const Color(0xFFF6F6F6),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: Row(
                            children: [
                              getIcon(data[index]['title']),
                              SizedBox(width: 12.w),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    data[index]['title'],
                                    style: GoogleFonts.dmSans(
                                      color: const Color(0xFF191B1E),
                                      fontSize: 14.sp,
                                      fontWeight: FontWeight.w700,
                                    ),
                                  ),
                                  SizedBox(height: 4.h),
                                  (data[index]['subTitle'] != '')
                                      ? Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              data[index]['subTitle'],
                                              style: GoogleFonts.dmSans(
                                                color: const Color(0xFF191B1E),
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.w400,
                                              ),
                                            ),
                                            SizedBox(height: 4.h),
                                          ],
                                        )
                                      : Container(),
                                  Text(
                                    data[index]['dateTime'],
                                    style: GoogleFonts.dmSans(
                                      color: const Color(0xFF8D8D8D),
                                      fontSize: 11.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                              Spacer(),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  (data[index]['onHold'])
                                      ? Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              AppText.onHold,
                                              style: GoogleFonts.dmSans(
                                                color: const Color(0xFF0172CB),
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.w700,
                                              ),
                                            ),
                                            SizedBox(height: 4.h),
                                          ],
                                        )
                                      : Container(),
                                  Text(
                                    data[index]['value'],
                                    style: GoogleFonts.dmSans(
                                      color: const Color(0xFF191B1E),
                                      fontSize: 14.sp,
                                      fontWeight: FontWeight.w700,
                                    ),
                                  ),
                                  SizedBox(height: 4.h),
                                  (data[index]['subValue'] != '')
                                      ? Text(
                                          data[index]['subValue'],
                                          style: GoogleFonts.dmSans(
                                            color: const Color(0xFF191B1E),
                                            fontSize: 12.sp,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        )
                                      : Container(),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget getIcon(String title) {
    if (title == 'Deposit') {
      return Container(
        decoration: const BoxDecoration(
            shape: BoxShape.circle, color: Color(0xFF0FA4A4)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset(
            'assets/images/wallet_screen/deposit_list.png',
            height: 25.h,
          ),
        ),
      );
    } else if (title == 'Withdrawal') {
      return Container(
        decoration: const BoxDecoration(
            shape: BoxShape.circle, color: Color(0xFFE6681F)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset('assets/images/wallet_screen/withdraw_list.png',
              height: 25.h),
        ),
      );
    } else if (title == 'Investment') {
      return Container(
        decoration: const BoxDecoration(
            shape: BoxShape.circle, color: Color(0xFF0172CB)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset('assets/images/wallet_screen/invest_list.png',
              height: 25.h),
        ),
      );
    } else if (title == 'Yield') {
      return Container(
        decoration: const BoxDecoration(
            shape: BoxShape.circle, color: Color(0xFF4C4AEF)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset('assets/images/wallet_screen/yield_list.png',
              height: 25.h),
        ),
      );
    } else {
      return Container(
        decoration: const BoxDecoration(
            shape: BoxShape.circle, color: Color(0xFF0E9445)),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset('assets/images/wallet_screen/refund_list.png',
              height: 25.h),
        ),
      );
    }
  }
}
