import 'dart:async';

import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/setting_utils_models/faqs_model.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/enums.dart';
import 'package:mc_common_app/view_models/setting_options_view_model.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:provider/provider.dart';

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

  @override
  State<SettingOptionsFAQs> createState() => _SettingOptionsFAQsState();
}

class _SettingOptionsFAQsState extends State<SettingOptionsFAQs> {
  late SettingOptionsVM settingsOptionsVM;

  @override
  void initState() {
    settingsOptionsVM = context.read<SettingOptionsVM>();
    scheduleMicrotask(() async {
      await settingsOptionsVM.getAllFaqs();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CustomAppBar(
          title: LocaleKeys.faqs.tr(),
          isRemoveBackButton: false,
          isDrawerEnabled: false,
          onBackButtonTapped: () => Navigator.pop(context),
        ),
        body: Consumer(
          builder: (BuildContext context, SettingOptionsVM settingsOptionsVM, Widget? child) {
            return Container(
              color: MyColors.backgroundColor,
              width: double.infinity,
              height: double.infinity,
              child: Column(
                children: [
                  16.height,
                  Expanded(
                      child: RefreshIndicator(
                    onRefresh: () async => await settingsOptionsVM.getAllFaqs(),
                    child: (settingsOptionsVM.state == ViewState.busy)
                        ? const Center(child: CircularProgressIndicator())
                        : settingsOptionsVM.faqsList.isEmpty
                            ? Padding(
                                padding: const EdgeInsets.all(21),
                                child: Center(child: LocaleKeys.noFAQsToShow.tr().toText(textAlign: TextAlign.center, fontSize: 16, color: MyColors.lightTextColor)),
                              )
                            : ListView.separated(
                                itemCount: settingsOptionsVM.faqsList.length,
                                padding: const EdgeInsets.all(16),
                                itemBuilder: (context, index) {
                                  FAQsModel faqModel = settingsOptionsVM.faqsList[index];
                                  return ExpansionTile(
                                    tilePadding: EdgeInsets.zero,
                                    shape: const Border(),
                                    title: (faqModel.question ?? "").toText(fontSize: 16).paddingOnly(left: 8, right: 8),
                                    onExpansionChanged: (value) {
                                      setState(() {
                                        settingsOptionsVM.faqsList[index].isCollapsed = value;
                                      });
                                    },
                                    backgroundColor: Colors.transparent,
                                    collapsedBackgroundColor: Colors.transparent,
                                    initiallyExpanded: settingsOptionsVM.faqsList[index].isCollapsed ?? false,
                                    trailing: (settingsOptionsVM.faqsList[index].isCollapsed ?? false) ? const Icon(Icons.keyboard_arrow_up) : const Icon(Icons.keyboard_arrow_down),
                                    // subtitle: ("Channel: ${faqModel.channel.toString()}").toText(color: MyColors.lightTextColor).paddingOnly(left: 8, right: 8),
                                    children: [
                                      Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          5.height,
                                          (faqModel.answer ?? "").toText(color: MyColors.lightTextColor, fontSize: 14, fontWeight: MyFonts.Medium),
                                          10.height,
                                        ],
                                      ).paddingOnly(left: 8, right: 8)
                                    ],
                                  ).toContainer(isShadowEnabled: true);
                                },
                                separatorBuilder: (context, index) => 12.height,
                              ),
                  )),
                ],
              ),
            );
          },
        ));
  }
}
