import 'package:expansion_tile_group/expansion_tile_group.dart';
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 '../../../../core/utils/language/localizations_delegate.dart';
import '../../../../shared/components/appbar_widget.dart';

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

  @override
  State<FAQScreen> createState() => _AccountappState();
}

class _AccountappState extends State<FAQScreen> {
  int gettingStartedselectedTile = 0;
  int investmentSelectedTile = 0;
  int knowledgeSelectedTile = 0;
  int complianceSelectedTile = 0;

  @override
  Widget build(BuildContext context) {
    var localizations = AppLocalizations.of(context);

    List<Map<String, String>> gettingStartedList = [
      {
        "title": localizations.translate(AppText.getStartedTitle1),
        "answer": localizations.translate(AppText.geStartedDesc1),
      },
      {
        "title": localizations.translate(AppText.getStartedTitle2),
        "answer": localizations.translate(AppText.geStartedDesc2),
      },
      {
        "title": localizations.translate(AppText.getStartedTitle3),
        "answer": localizations.translate(AppText.geStartedDesc3),
      }
    ];

    List<Map<String, String>> investmentList = [
      {
        "title": localizations.translate(AppText.investmentTitle1),
        "answer": localizations.translate(AppText.investmentDesc1),
      },
      {
        "title": localizations.translate(AppText.investmentTitle2),
        "answer": localizations.translate(AppText.investmentDesc2),
      },
      {
        "title": localizations.translate(AppText.investmentTitle3),
        "answer": localizations.translate(AppText.investmentDesc3),
      },
      {
        "title": localizations.translate(AppText.investmentTitle4),
        "answer": localizations.translate(AppText.investmentDesc4),
      },
      {
        "title": localizations.translate(AppText.investmentTitle5),
        "answer": localizations.translate(AppText.investmentDesc5),
      },
      {
        "title": localizations.translate(AppText.investmentTitle6),
        "answer": localizations.translate(AppText.investmentDesc6),
      },
      {
        "title": localizations.translate(AppText.investmentTitle7),
        "answer": localizations.translate(AppText.investmentDesc7),
      },
      {
        "title": localizations.translate(AppText.investmentTitle8),
        "answer": localizations.translate(AppText.investmentDesc8),
      },
      {
        "title": localizations.translate(AppText.investmentTitle9),
        "answer": localizations.translate(AppText.investmentDesc9),
      },
      {
        "title": localizations.translate(AppText.investmentTitle10),
        "answer": localizations.translate(AppText.investmentDesc10),
      },
      {
        "title": localizations.translate(AppText.investmentTitle11),
        "answer": localizations.translate(AppText.investmentDesc11),
      },
      {
        "title": localizations.translate(AppText.investmentTitle12),
        "answer": localizations.translate(AppText.investmentDesc12),
      },
      {
        "title": localizations.translate(AppText.investmentTitle13),
        "answer": localizations.translate(AppText.investmentDesc13),
      }
    ];

    List<Map<String, String>> knowledgeAndEducationList = [
      {
        "title": localizations.translate(AppText.knowledgeTitle1),
        "answer": localizations.translate(AppText.knowledgeDesc1),
      },
      {
        "title": localizations.translate(AppText.knowledgeTitle2),
        "answer": localizations.translate(AppText.knowledgeDesc2),
      },
      {
        "title": localizations.translate(AppText.knowledgeTitle3),
        "answer": localizations.translate(AppText.knowledgeDesc3),
      }
    ];

    List<Map<String, String>> complianceSecurityAndSupportList = [
      {
        "title": localizations.translate(AppText.securityTitle1),
        "answer": localizations.translate(AppText.securityDesc1),
      },
      {
        "title": localizations.translate(AppText.securityTitle2),
        "answer": localizations.translate(AppText.securityDesc2),
      },
      {
        "title": localizations.translate(AppText.securityTitle3),
        "answer": localizations.translate(AppText.securityDesc3),
      },
      {
        "title": localizations.translate(AppText.securityTitle4),
        "answer": localizations.translate(AppText.securityDesc4),
      },
      {
        "title": localizations.translate(AppText.securityTitle5),
        "answer": localizations.translate(AppText.securityDesc5),
      }
    ];

    return Scaffold(
      backgroundColor: AppColor.plainWhite,
      appBar: AppBarWidget(
        height: 75,
        titleTxt: localizations.translate(AppText.faqText),
      ),
      body: SafeArea(
          child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 16.w, top: 23.h),
              child: Text(
                localizations.translate(AppText.gettingStarted),
                style: GoogleFonts.dmSans(
                    fontSize: 18.sp,
                    color: AppColor.charcoalColor,
                    fontWeight: FontWeight.w600),
              ),
            ),
            Gap(17.h),
            Container(
              margin: const EdgeInsets.only(
                bottom: 20,
                top: 15,
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: ExpansionTileGroup(
                  spaceBetweenItem: 23,
                  toggleType: ToggleType.expandOnlyCurrent,
                  children: List.generate(
                    gettingStartedList.length,
                    (index) => ExpansionTileItem(
                      isHasBottomBorder: true,
                      isHasLeftBorder: true,
                      isHasRightBorder: true,
                      boxShadow: [
                        BoxShadow(
                          color: AppColor.plainBlack.withOpacity(0.15),
                          spreadRadius: 2,
                          blurRadius: 10,
                          offset:
                              const Offset(0, 3), // changes position of shadow
                        ),
                      ],
                      isHasTopBorder: true,
                      collapsedBackgroundColor: AppColor.portfolioCardBgColor,
                      borderRadius: BorderRadius.circular(10),
                      onExpansionChanged: (bool expanding) {
                        if (expanding) {
                          setState(() {
                            gettingStartedselectedTile = index;
                          });
                        } else {
                          setState(() {
                            gettingStartedselectedTile = -1;
                          });
                        }
                      },
                      backgroundColor: AppColor.portfolioCardBgColor,
                      childrenPadding: EdgeInsets.only(
                          left: 0.w, right: 0.w, bottom: 8.h, top: 10.h),
                      initiallyExpanded: index == gettingStartedselectedTile,
                      isHasTrailing: false,
                      title: Text(
                        gettingStartedList[index]['title']!,
                        maxLines: 3,
                        style: GoogleFonts.dmSans(
                            fontSize: 16.sp,
                            color: AppColor.otpTextColor,
                            fontWeight: FontWeight.w600),
                      ),
                      children: <Widget>[
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 5),
                          width: 1.sw,
                          // height: 109.h,
                          decoration: BoxDecoration(
                            color: AppColor.plainWhite,
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                                horizontal: 12.w, vertical: 10.h),
                            child: Text(
                              gettingStartedList[index]['answer']!,
                              style: GoogleFonts.dmSans(
                                fontSize: 16.sp,
                                color: AppColor.investPaymentTextColor,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 16.w, top: 23.h),
              child: Text(
                localizations.translate(AppText.investment),
                style: GoogleFonts.dmSans(
                    fontSize: 18.sp,
                    color: AppColor.charcoalColor,
                    fontWeight: FontWeight.w600),
              ),
            ),
            Gap(17.h),
            Container(
              margin: const EdgeInsets.only(
                bottom: 20,
                top: 15,
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: ExpansionTileGroup(
                  spaceBetweenItem: 23,
                  toggleType: ToggleType.expandOnlyCurrent,
                  children: List.generate(
                    investmentList.length,
                    (index) => ExpansionTileItem(
                      isHasBottomBorder: true,
                      isHasLeftBorder: true,
                      isHasRightBorder: true,
                      boxShadow: [
                        BoxShadow(
                          color: AppColor.plainBlack.withOpacity(0.15),
                          spreadRadius: 2,
                          blurRadius: 10,
                          offset:
                              const Offset(0, 3), // changes position of shadow
                        ),
                      ],
                      isHasTopBorder: true,
                      collapsedBackgroundColor: AppColor.portfolioCardBgColor,
                      borderRadius: BorderRadius.circular(10),
                      onExpansionChanged: (bool expanding) {
                        if (expanding) {
                          setState(() {
                            investmentSelectedTile = index;
                          });
                        } else {
                          setState(() {
                            investmentSelectedTile = -1;
                          });
                        }
                      },
                      backgroundColor: AppColor.portfolioCardBgColor,
                      childrenPadding: EdgeInsets.only(
                          left: 0.w, right: 0.w, bottom: 8.h, top: 10.h),
                      initiallyExpanded: index == investmentSelectedTile,
                      isHasTrailing: false,
                      title: Text(
                        investmentList[index]['title']!,
                        maxLines: 3,
                        style: GoogleFonts.dmSans(
                            fontSize: 16.sp,
                            color: AppColor.otpTextColor,
                            fontWeight: FontWeight.w600),
                      ),
                      children: <Widget>[
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 5),
                          width: 1.sw,
                          // height: 109.h,
                          decoration: BoxDecoration(
                            color: AppColor.plainWhite,
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                                horizontal: 12.w, vertical: 10.h),
                            child: Text(
                              investmentList[index]['answer']!,
                              style: GoogleFonts.dmSans(
                                fontSize: 16.sp,
                                color: AppColor.investPaymentTextColor,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 16.w, top: 23.h),
              child: Text(
                localizations.translate(AppText.knowledgeAndEducation),
                style: GoogleFonts.dmSans(
                    fontSize: 18.sp,
                    color: AppColor.charcoalColor,
                    fontWeight: FontWeight.w600),
              ),
            ),
            Gap(17.h),
            Container(
              margin: const EdgeInsets.only(
                bottom: 20,
                top: 15,
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: ExpansionTileGroup(
                  spaceBetweenItem: 23,
                  toggleType: ToggleType.expandOnlyCurrent,
                  children: List.generate(
                    knowledgeAndEducationList.length,
                    (index) => ExpansionTileItem(
                      isHasBottomBorder: true,
                      isHasLeftBorder: true,
                      isHasRightBorder: true,
                      boxShadow: [
                        BoxShadow(
                          color: AppColor.plainBlack.withOpacity(0.15),
                          spreadRadius: 2,
                          blurRadius: 10,
                          offset:
                              const Offset(0, 3), // changes position of shadow
                        ),
                      ],
                      isHasTopBorder: true,
                      collapsedBackgroundColor: AppColor.portfolioCardBgColor,
                      borderRadius: BorderRadius.circular(10),
                      onExpansionChanged: (bool expanding) {
                        if (expanding) {
                          setState(() {
                            knowledgeSelectedTile = index;
                          });
                        } else {
                          setState(() {
                            knowledgeSelectedTile = -1;
                          });
                        }
                      },
                      backgroundColor: AppColor.portfolioCardBgColor,
                      childrenPadding: EdgeInsets.only(
                          left: 0.w, right: 0.w, bottom: 8.h, top: 10.h),
                      initiallyExpanded: index == knowledgeSelectedTile,
                      isHasTrailing: false,
                      title: Text(
                        knowledgeAndEducationList[index]['title']!,
                        maxLines: 3,
                        style: GoogleFonts.dmSans(
                            fontSize: 16.sp,
                            color: AppColor.otpTextColor,
                            fontWeight: FontWeight.w600),
                      ),
                      children: <Widget>[
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 5),
                          width: 1.sw,
                          // height: 109.h,
                          decoration: BoxDecoration(
                            color: AppColor.plainWhite,
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                                horizontal: 12.w, vertical: 10.h),
                            child: Text(
                              knowledgeAndEducationList[index]['answer']!,
                              style: GoogleFonts.dmSans(
                                fontSize: 16.sp,
                                color: AppColor.investPaymentTextColor,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 16.w, top: 23.h),
              child: Text(
                localizations.translate(AppText.complianceSecurityAndSupport),
                style: GoogleFonts.dmSans(
                    fontSize: 18.sp,
                    color: AppColor.charcoalColor,
                    fontWeight: FontWeight.w600),
              ),
            ),
            Gap(17.h),
            Container(
              margin: const EdgeInsets.only(
                bottom: 20,
                top: 15,
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: ExpansionTileGroup(
                  spaceBetweenItem: 23,
                  toggleType: ToggleType.expandOnlyCurrent,
                  children: List.generate(
                    complianceSecurityAndSupportList.length,
                    (index) => ExpansionTileItem(
                      isHasBottomBorder: true,
                      isHasLeftBorder: true,
                      isHasRightBorder: true,
                      boxShadow: [
                        BoxShadow(
                          color: AppColor.plainBlack.withOpacity(0.15),
                          spreadRadius: 2,
                          blurRadius: 10,
                          offset:
                              const Offset(0, 3), // changes position of shadow
                        ),
                      ],
                      isHasTopBorder: true,
                      collapsedBackgroundColor: AppColor.portfolioCardBgColor,
                      borderRadius: BorderRadius.circular(10),
                      onExpansionChanged: (bool expanding) {
                        if (expanding) {
                          setState(() {
                            complianceSelectedTile = index;
                          });
                        } else {
                          setState(() {
                            complianceSelectedTile = -1;
                          });
                        }
                      },
                      backgroundColor: AppColor.portfolioCardBgColor,
                      childrenPadding: EdgeInsets.only(
                          left: 0.w, right: 0.w, bottom: 8.h, top: 10.h),
                      initiallyExpanded: index == complianceSelectedTile,
                      isHasTrailing: false,
                      title: Text(
                        complianceSecurityAndSupportList[index]['title']!,
                        maxLines: 3,
                        style: GoogleFonts.dmSans(
                            fontSize: 16.sp,
                            color: AppColor.otpTextColor,
                            fontWeight: FontWeight.w600),
                      ),
                      children: <Widget>[
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 5),
                          width: 1.sw,
                          // height: 109.h,
                          decoration: BoxDecoration(
                            color: AppColor.plainWhite,
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                                horizontal: 12.w, vertical: 10.h),
                            child: Text(
                              complianceSecurityAndSupportList[index]
                                  ['answer']!,
                              style: GoogleFonts.dmSans(
                                fontSize: 16.sp,
                                color: AppColor.investPaymentTextColor,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      )),
    );
  }
}
