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 '../../../../shared/components/appbar_widget.dart';

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

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

class _AccountappState extends State<FAQScreen> {
  int selectedTile = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.plainWhite,
      appBar: const AppBarWidget(
        height: 75,
        titleTxt: 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(
                "Frequently Asked Questions:",
                style: GoogleFonts.dmSans(
                    fontSize: 18.sp,
                    color: AppColor.charcoalColor,
                    fontWeight: FontWeight.w600),
              ),
            ),
            Gap(17.h),
            Container(
              margin: const EdgeInsets.only(
                bottom: 50,
                top: 15,
              ),
              height: 1.sh,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: ExpansionTileGroup(
                    spaceBetweenItem: 23,
                    toggleType: ToggleType.expandOnlyCurrent,
                    children: List.generate(
                        faList.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(() {
                                    selectedTile = index;
                                  });
                                } else {
                                  setState(() {
                                    selectedTile = -1;
                                  });
                                }
                              },
                              backgroundColor: AppColor.portfolioCardBgColor,
                              childrenPadding: EdgeInsets.only(
                                  left: 0.w,
                                  right: 0.w,
                                  bottom: 8.h,
                                  top: 10.h),
                              initiallyExpanded: index == selectedTile,
                              isHasTrailing: false,
                              title: Text(
                                faList[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(
                                      faList[index]['answer']!,
                                      style: GoogleFonts.dmSans(
                                        fontSize: 16.sp,
                                        color: AppColor.investPaymentTextColor,
                                      ),
                                    ),
                                  ),
                                )
                              ],
                            ))),
              ),
            ),
          ],
        ),
      )),
    );
  }
}

List<Map<String, String>> faList = [
  {
    "title": "What is fractional property investment?",
    "answer":
        "Fractional property investment allows multiple investors to own a fraction of a property. This means you can invest in real estate without needing to purchase an entire property. Instead, you buy a share of the property, and your investment is proportionate to the amount you invest.",
  },
  {
    "title": "How does the app work?",
    "answer":
        "Our app simplifies the process of fractional property investment. Users can browse available properties, view detailed information and investment opportunities, and purchase shares in properties directly through the app. The app also provides tools to manage investments, track performance, and receive updates on property management."
  },
  {
    "title": "Is fractional property investment safe?",
    "answer":
        "While all investments carry risk, fractional property investment can be a safer option due to diversification. By investing in multiple properties, you can spread risk and reduce the impact of any single property’s performance on your overall investment."
  },
  {
    "title": "What kind of properties can I invest in?",
    "answer":
        "The app offers a variety of properties, including residential, commercial, and mixed-use properties. Each listing provides detailed information about the property, including location, projected returns, and investment terms."
  },
  {
    "title": "Is there a minimum investment amount?",
    "answer":
        "Yes, each property listing will specify the minimum investment amount required. This amount varies depending on the property and the terms of the investment."
  }
];
