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/routes.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:ticket_widget/ticket_widget.dart';

import '../../../../../core/styles/app_color.dart';
import '../../../../../shared/components/button_widget.dart';

class WalletDetails extends StatelessWidget {
  final String type;
  WalletDetails({super.key, required this.type});
  final List titles = [
    AppText.status,
    AppText.paymentMethod,
    AppText.accountName,
    AppText.iban,
    AppText.beneficiaryAddress,
    AppText.bankName,
    AppText.branchAddress,
    AppText.SWIFTcode,
    AppText.refid,
  ];
  final List values = [
    'On hold',
    'Google/Apple Pay',
    'Name Surname',
    'DE 1234 5678 9012 3456',
    'Hohenzollernring 58, 95444',
    'Name Bank',
    'Hohenzollernring 58, 95444',
    'BC12345',
    'FRYU FHDU 1234',
  ];

  @override
  Widget build(BuildContext context) {
    return (type == 'confirm-investment')
        ? WillPopScope(
            onWillPop: () async => false,
            child: Scaffold(
              backgroundColor: Colors.white,
              bottomNavigationBar: Container(
                margin: const EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 15,
                ),
                width: 1.sw,
                height: 60.h,
                child: ButtonWidget().elevatedBtn(
                  txtClr: AppColor.plainWhite,
                  function: () {
                    goRouter.pop();
                    goRouter.pop();
                    goRouter.pop();
                    goRouter.pop();
                    goRouter.pop();
                  },
                  text: AppText.closeText,
                  clr: AppColor.primaryColor2,
                ),
              ),
              appBar: AppBar(
                backgroundColor: Colors.white,
                elevation: 0,
                automaticallyImplyLeading: false,
                actions: [
                  IconButton(
                    onPressed: () {
                      goRouter.pop();
                      goRouter.pop();
                      goRouter.pop();
                      goRouter.pop();
                      goRouter.pop();
                    },
                    icon: const Icon(
                      Icons.close_sharp,
                      color: Color(0xFF363636),
                    ),
                  ),
                ],
                scrolledUnderElevation: 0.0,
                centerTitle: true,
                title: Text(
                  AppText.investmentConfirmationText,
                  style: GoogleFonts.dmSans(
                    color: const Color(0xFF272727),
                    fontSize: 20.sp,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              body: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(22.r),
                    color: Colors.transparent,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.15),
                        spreadRadius: 2,
                        blurRadius: 10,
                        offset:
                            const Offset(0, 8), // changes position of shadow
                      ),
                    ],
                  ),
                  child: TicketWidget(
                    height: 325.h,
                    isCornerRounded: true,
                    width: double.infinity,
                    color: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              getIcon(type),
                              SizedBox(
                                height: 16.h,
                              ),
                              Text(
                                AppText.investment,
                                style: GoogleFonts.dmSans(
                                  color: const Color(0xFF191B1E),
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                              SizedBox(
                                height: 4.h,
                              ),
                              Text(
                                "Name of investment",
                                style: GoogleFonts.dmSans(
                                  color: const Color(0xFF191B1E),
                                  fontSize: 17.sp,
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                              SizedBox(
                                height: 4.h,
                              ),
                              Text(
                                '10/04/2024 22:04',
                                style: GoogleFonts.dmSans(
                                  color: const Color(0xFF8D8D8D),
                                  fontSize: 11.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              SizedBox(
                                height: 16.h,
                              ),
                              Text(
                                '+ SAR 100,000',
                                style: GoogleFonts.dmSans(
                                  color: const Color(0xFF191B1E),
                                  fontSize: 20.sp,
                                  fontWeight: FontWeight.w900,
                                ),
                              ),
                              Text(
                                "+ \$100.00",
                                style: GoogleFonts.dmSans(
                                  color: const Color(0xFF363636),
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 33.h,
                          ),
                          _buildBody(),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          )
        : Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: Colors.white,
              elevation: 0,
              scrolledUnderElevation: 0.0,
              centerTitle: true,
              title: Text(
                AppText.walletDetailsTitle,
                style: GoogleFonts.dmSans(
                  color: const Color(0xFF272727),
                  fontSize: 20.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
            body: Padding(
              padding: const EdgeInsets.fromLTRB(18.0, 18.0, 18.0, 0.0),
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(22.r),
                  color: (type == 'Yield' || type == 'Refund')
                      ? Colors.white
                      : Colors.transparent,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.15),
                      spreadRadius: 2,
                      blurRadius: 10,
                      offset: const Offset(0, 8), // changes position of shadow
                    ),
                  ],
                ),
                child: (type == 'Yield' || type == 'Refund')
                    ? Padding(
                        padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                getIcon(type),
                                SizedBox(
                                  height: 16.h,
                                ),
                                Text(
                                  type,
                                  style: GoogleFonts.dmSans(
                                    color: const Color(0xFF191B1E),
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                                SizedBox(
                                  height: 4.h,
                                ),
                                Text(
                                  "Name of investment",
                                  style: GoogleFonts.dmSans(
                                    color: const Color(0xFF191B1E),
                                    fontSize: 17.sp,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                                SizedBox(
                                  height: 4.h,
                                ),
                                Text(
                                  '10/04/2024 22:04',
                                  style: GoogleFonts.dmSans(
                                    color: const Color(0xFF8D8D8D),
                                    fontSize: 11.sp,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                                SizedBox(
                                  height: 16.h,
                                ),
                                Text(
                                  '+ SAR 100,000',
                                  style: GoogleFonts.dmSans(
                                    color: const Color(0xFF191B1E),
                                    fontSize: 20.sp,
                                    fontWeight: FontWeight.w900,
                                  ),
                                ),
                                (type == "Yield")
                                    ? Text(
                                        "+ \$100.00",
                                        style: GoogleFonts.dmSans(
                                          color: const Color(0xFF363636),
                                          fontSize: 12.sp,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      )
                                    : const SizedBox(),
                              ],
                            ),
                            SizedBox(
                              height: 35.h,
                            ),
                            _buildBody(),
                          ],
                        ),
                      )
                    : SingleChildScrollView(
                        child: Column(
                          children: [
                            TicketWidget(
                              height: (type == 'Investment' ||
                                      type == "confirm-investment")
                                  ? 325.h
                                  : MediaQuery.of(context).size.height - 70,
                              isCornerRounded: true,
                              width: double.infinity,
                              color: Colors.white,
                              child: Padding(
                                padding:
                                    const EdgeInsets.fromLTRB(20.0, 30, 20, 10),
                                child: Column(
                                  // mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        getIcon(type),
                                        SizedBox(
                                          height: 16.h,
                                        ),
                                        Text(
                                          type == "confirm-investment"
                                              ? "Investment"
                                              : type,
                                          style: GoogleFonts.dmSans(
                                            color: const Color(0xFF191B1E),
                                            fontSize: 14.sp,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                        SizedBox(
                                          height: 4.h,
                                        ),
                                        (type == "confirm-investment" ||
                                                type == 'Investment')
                                            ? Text(
                                                "Name of investment",
                                                style: GoogleFonts.dmSans(
                                                  color:
                                                      const Color(0xFF191B1E),
                                                  fontSize: 17.sp,
                                                  fontWeight: FontWeight.w700,
                                                ),
                                              )
                                            : const SizedBox(),
                                        SizedBox(
                                          height: 4.h,
                                        ),
                                        Text(
                                          '10/04/2024 22:04',
                                          style: GoogleFonts.dmSans(
                                            color: const Color(0xFF8D8D8D),
                                            fontSize: 11.sp,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                        SizedBox(
                                          height: 16.h,
                                        ),
                                        Text(
                                          '+ SAR 100,000',
                                          style: GoogleFonts.dmSans(
                                            color: const Color(0xFF191B1E),
                                            fontSize: 20.sp,
                                            fontWeight: FontWeight.w900,
                                          ),
                                        ),
                                        (type == "confirm-investment" ||
                                                type == 'Investment')
                                            ? Text(
                                                "+ \$100.00",
                                                style: GoogleFonts.dmSans(
                                                  color:
                                                      const Color(0xFF363636),
                                                  fontSize: 12.sp,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              )
                                            : const SizedBox(),
                                      ],
                                    ),
                                    SizedBox(
                                      height: 33.h,
                                    ),
                                    _buildBody(),
                                  ],
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 10.h,
                            ),
                          ],
                        ),
                      ),
              ),
            ),
          );
  }

  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' || title == 'confirm-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),
        ),
      );
    }
  }

  Widget _buildBody() {
    if (type == 'Yield') {
      return Container();
    } else if (type == 'Refund') {
      return Container();
    } else if (type == 'Investment' || type == "confirm-investment") {
      return Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.white,
              width: 1.0,
            ),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 15.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                AppText.paymentMethod,
                style: GoogleFonts.dmSans(
                  color: const Color(0xFF535353),
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(
                width: 180.w,
                child: Text(
                  'Google/Apple Pay',
                  textAlign: TextAlign.end,
                  style: GoogleFonts.dmSans(
                    color: const Color(0xFF191B1E),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    } else {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: titles.length,
          itemBuilder: (context, index) {
            if (type == 'Deposit' && titles[index] == 'Status') {
              return Container();
            } else {
              return Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: (index != titles.length - 1)
                          ? Colors.black
                          : Colors.white,
                      width: 1.0,
                    ),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 15.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        titles[index],
                        style: GoogleFonts.dmSans(
                          color: const Color(0xFF535353),
                          fontSize: 14.sp,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      Expanded(
                        child: Text(
                          values[index],
                          textAlign: TextAlign.end,
                          style: GoogleFonts.dmSans(
                            color: (titles[index] == 'Status')
                                ? const Color(0xFF0172CB)
                                : const Color(0xFF191B1E),
                            fontSize: 14.sp,
                            fontWeight: (titles[index] == 'Status')
                                ? FontWeight.w700
                                : FontWeight.w600,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }
          },
        ),
      );
    }
  }
}
